Materiale angolare: gruppo di input e pulsanti md sulla stessa riga

Question

Sto riscontrando qualche problema nel tentativo di includere un gruppo di input e un paio di pulsanti sulla stessa riga utilizzando angular-material.

La HTML struttura seguente produce il risultato si può vedere l'immagine sotto di essa, che non è quello che voglio:

<section layout-align="end center" layout-padding flex> 
    <div layout="row" layout-align="start center" flex> 
     <div class="input-group"> 
      <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"> 
      <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span> 
     </div> 
    </div> 
    <section layout-padding> 
     <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button> 
     <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button> 
    </section> 
</section> 

Tuttavia, se cerco di includere tutti gli elementi all'interno del stesso layout="row", il input-group finisce per prendere tutto lo spazio e spingendo i pulsanti di fuori del div genitore:

<section class="no-print" layout-align="end center" layout-padding flex> 
    <div layout="row" layout-align="start center" flex> 
     <div class="input-group"> 
      <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"> 
      <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span> 
     </div> 
     <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button> 
     <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button> 
    </div> 
</section> 

C'è un modo giusto di avere un gruppo di ingresso e un paio di pulsanti tutti sulla stessa linea utilizzando angular-material o devo creare il mio proprio stile?

Answer 1

provare il seguente codice:

<form layout layout-align="center" layout-padding> 
    <div layout="row" flex> 
     <md-input-container flex class="md-icon-float md-block md-title"> 
      <label>Your font number</label> 
      <!-- below is the material icons --> 
      <md-icon class="material-icons">phone</md-icon> 
      <input type="text"> 
     </md-input-container> 
     <div> 
      <md-button class="md-raised"> 
      <!-- below is the material icons --> 
       <md-icon class="material-icons">search</md-icon> 
      </md-button> 
     </div> 
    </div> 
</form> 

vedere un esempio nella seguente link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000