アングル材質：同じ行の入力グループとmdボタン

Question

angular-materialを使用して、同じ行に入力グループと2つのボタンを含めるときに問題があります。

次HTML構造は、私が欲しいものではありませんこれは、あなたがそれ下の画像を見ることができる結果を生成します。

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

しかし、私は内のすべての要素を含むしようとした場合layout="row"同じ、input-groupは、すべてのスペースを取り、親の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> 

angular-materialを使用して入力グループといくつかのボタンをすべて同じ行に表示する方法がありますか、自分のスタイルを作成する必要はありますか？

Answer 1

は、次のコードを試してみてください。

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

は http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000