AngularJS材質布局 - flex問題

[英]AngularJS material layout - issues with flex


I have a problem setting the flex properties of my layout. Here is a plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview

我在設置布局的flex屬性時遇到問題。這是一個吸煙者:http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview

  <md-content flex layout="row" layout-align="center">
    <div layout="column">
      <div flex layout="column" layout-fill>
        <div flex="33">
          <md-input-container>
            <label>Enter Room's Name</label>
            <input ng-model="test" placeholder="Enter Room's Name">
          </md-input-container>
        </div>
        <div flex="66">
          <md-button class="md-raised md-accent">
            Create Chat Room
          </md-button>
        </div>
      </div>
    </div>
  </md-content>

Here is the link to documentation: https://material.angularjs.org/#/layout/grid

以下是文檔鏈接:https://material.angularjs.org/#/layout/grid

The issue that the flex property of the input (text) and input (button) are not obeying the flex attribute.

輸入(文本)和輸入(按鈕)的flex屬性不遵循flex屬性的問題。

What I am trying to achieve is something like that: enter image description here

我想要實現的是這樣的:

1 个解决方案

#1


11  

here is the result after I tried it,

這是我試過后的結果,

hopefully it helps:

希望它有所幫助:

<md-content layout="row" layout-align="center">
  <div layout="column">
    <div flex layout="column" layout-fill> <!-- this is what I change -->
      <div flex="33">
        <md-input-container>
          <label>Enter Room's Name</label>
          <input ng-model="test" placeholder="Enter Room's Name">
        </md-input-container>
      </div>
      <div flex="66">
        <md-button class="md-raised md-accent">
          Create Chat Room
        </md-button>
      </div>
    </div>
  </div>

</md-content>

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/02/10/721185c226f7dbb134804f4dbcf1c9a0.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com