AutoAlign使用角度材料设计的行中的复选框

时间:2015-03-16 06:08:50

标签: html5 css3 material-design material

我正在为角度应用程序使用角度材质设计,我正在获取elasic搜索索引的字段并将其创建为我的表单中的复选框。 它正在生成,但是当它有超过4个字段时,对齐看起来很笨拙。

HTML:

 <div layout="row" layout-align='left start'>                       
   <md-checkbox   ng-repeat="field in selectedFields"    layout="row"  ng-click="toggleCheck(field)"    style="text-transform:capitalize"  aria-label={{field.name}}>
   {{field.name}}
  </md-checkbox>
</div>

输出: enter image description here

Plnker

1 个答案:

答案 0 :(得分:3)

刚检查了angular-material-layout.css并找到&#34; layout-wrap&#34;。

你需要这个:

 <md-content class="md-whiteframe-z2">
            <div layout="row" layout-wrap  md-scroll-y flex>
                   <md-checkbox flex='20'
                  ng-repeat="field in fields"
               layout="row"
               ng-click="toggleCheck(field)"
               style="text-transform:capitalize"
               aria-label={{field}}>
               {{field}}
                </md-checkbox>
            </div>
</md-content>

在此工作:Plunk