гибкий макет не работает с md-dialog-actions

Мне нужно открыть модальное окно при нажатии кнопки, для которого я использую угловой материал. где мне нужны две кнопки внизу диалогового окна вправо. Я использовал макет с гибкостью, который не работает должным образом.

HTML:

<md-dialog ng-cloak class="promptIncludeExclude-options">
<md-toolbar class="promptIncludeExclude-header">
    <div class="md-toolbar-tools">
        <span class="title">Product Inclusion Notification</span>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="dialogController.closeDialog()">
            <span class="close-dialog">&#10005;</span>
        </md-button>
    </div>
</md-toolbar>
<md-dialog-content>
</md-dialog-content>
<md-dialog-actions layout="row">
    <div flex="25" flex-offset="25"><md-button ng-click="dialogController.closeDialog()" >Proceed</md-button></div>
    <div flex="50" flex-offset="20" ><md-button ng-click="dialogController.closeDialog()">Cancel</md-button></div>
</md-dialog-actions>


css flexbox angularjs angularjs-material
person Shikha thakur    schedule 30.11.2016    source источник
comment
stackoverflow.com/help/mcve   -  person Michael Benjamin    schedule 01.12.2016
comment
Пожалуйста, объясните, что вы имеете в виду, говоря о том, что требуется, и опубликуйте соответствующий CSS. Невозможно ответить на ваш вопрос как есть.   -  person chazsolo    schedule 01.12.2016
comment
Не могли бы вы добавить немного дополнительной информации о ваших требованиях? Спасибо.   -  person Georgy    schedule 01.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это простая конфигурация макета. Используйте классы макета для выравнивания содержимого по своему усмотрению:

<md-dialog-actions class="layout-row layout-align-end-end">
    <md-button ng-click="dialogController.closeDialog()">Proceed</md-button>
    <md-button ng-click="dialogController.closeDialog()">Cancel</md-button>
</md-dialog-actions>

Нет необходимости оборачивать кнопки внутри div и давать им гибкую ширину и смещение, и наверняка это то, что беспорядочно ...

person Vi100    schedule 06.12.2016
comment
спасибо, за эту информацию. Для информации: в md-dialog-content то же самое <div layout="row"></div> не работает, просто используйте элемент <div class="layout-row"><div class="flex-50"></div><..></..></div>, с именами классов он отлично работает - person maliness; 16.12.2016