Флажки AutoAlign в строке с использованием углового дизайна материалов

Я использую угловой дизайн материала для своего углового приложения, я получаю поля индекса эластичного поиска и создаю их как флажки в своей форме. Он генерируется, но когда в нем больше 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>

ВЫВОД: введите здесь описание изображения

Plnker:


html angularjs angularjs-material
person Sajeetharan    schedule 16.03.2015    source источник
comment
сделать скрипку для этого.   -  person nitin    schedule 16.03.2015
comment
@nitin я прикрепил плункер с вопросом   -  person Sajeetharan    schedule 16.03.2015

Ответы (1)


arrow_upward
3
arrow_downward

Только что проверил 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

person nitin    schedule 16.03.2015
comment
он будет придерживаться только выравнивания, указанного в макете. Вы можете сделать повтор только с 4 или 5 флажками в каждой строке. - person nitin; 17.03.2015
comment
Я думаю, ссылка устарела. Флажков не видно - person Hari; 06.01.2021