Angular-Material: Eingabegruppe und MD-Tasten in der gleichen Zeile

Question

Ich habe Probleme mit der Eingabe einer Gruppe und ein paar Tasten in der gleichen Zeile mit angular-material.

Die folgende HTML Struktur erzeugt das Ergebnis, das Sie auf dem Bild unten sehen können, das ist nicht das, was ich will:

<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> 

Allerdings, wenn ich versuche, alle Elemente innerhalb der aufzunehmen layout="row" gleicht, die input-group landen nimm die ganzen Raum und drückt die Tasten aus der Mutter div:

<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> 

Gibt es eine richtige Art und Weise, eine Eingabegruppe und ein paar Schaltflächen in derselben Zeile zu verwenden, unter Verwendung von angular-material oder muss ich meine eigenen Stile erstellen?

Answer 1

Versuchen Sie, den folgenden Code:

<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> 

sehen eine Probe in den folgenden Link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000