使用 angular material 设计的行中的自动对齐复选框
AutoAlign Checkboxes in row using angular material design
我正在为我的 angular 应用程序使用 angular 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>
输出:
刚检查了 angular-material-layout.css 发现了 "layout-wrap".
你需要这个:
<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
我正在为我的 angular 应用程序使用 angular 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>
输出:
刚检查了 angular-material-layout.css 发现了 "layout-wrap".
你需要这个:
<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