Первый дочерний элемент div поднимается и скрывается md-toolbar при макете div-align ="center center"

#angular-material

#угловой материал

Вопрос:

Я написал код в этом плунжере.

md-toolbar и часть кода div являются следующими :

 <div layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <p><strong>ngClassifieds</strong></p>
            <md-button ng-click="openSidebar();">
                <md-icon class="mdi mdi-plus-circle"></md-icon>
                New classifieds
            </md-button>
            <md-button ng-init="showFilters = false" ng-click="showFilters = !showFilters">
                <md-icon class="mdi mdi-magnify"></md-icon>
                Filters
            </md-button>
        </div>
    </md-toolbar>
    <div layout-margin class="filters" style="background-color: grey" layout="row" layout-align="center center" ng-show="showFilters">
        <md-input-container>
            <label>Enter Search Term</label>
            <input type="text" ng-model="classifiedsFilter">
        </md-input-container>
        <md-input-container>
            <label>Categories</label>
            <md-select ng-model="categoryfilt">
                <md-option ng-repeat="cat in categories" ng-value="cat">
                    {{cat}}
                </md-option>
            </md-select>
        </md-input-container>
        <md-button md-no-ink style="font-weight: bold;" class="md-warn" ng-click="classifiedsFilter = ''; categoryfilt = ''; ">Clear</md-button>
    </div></div>

как вы можете видеть на панели управления, первый дочерний элемент div (an md-input-container ) выскакивает из него и скрывается md-toolbar, но когда я изменил div layout-align from "center center" на layout-align="center" , все было в порядке, но почему это происходит? я взял этот пример кода из руководства, и значение layout-align div должно было быть установлено в "center center" . Другие дети div ведут себя иначе, чем их старший непослушный брат или сестра.

1. Я не совсем понимаю. Не могли бы вы объяснить, в чем проблема с вашей разметкой в этом CodePen — codepen.io/camden-kid/pen/QKYvpR ?

2. При нажатии кнопки «Фильтр» ввод с надписью «Ввести элемент поиска» отображается рядом со списком категорий и кнопкой «ОЧИСТИТЬ». Проблема в том, что ввод слева расположен выше, чем другие элементы, и когда он сфокусирован, его метка проходит под панелью инструментов и скрывается ею.

3. вы можете видеть это поведение на панели управления не в codepen, но и в codepen входные данные не выровнены по горизонтали с другими элементами

Ответ №1:

Если вы посмотрите на первый пример из документов в CodePen, вы увидите, что layout-align=center center вызывает проблему — http://codepen.io/camden-kid/pen/yakXzX

Ваша разметка с помощью layout-align=center работает нормально (как вы указали в своем вопросе) — CodePen

Причина этого в том, что второй center выравнивает все элементы по горизонтали в центре родительского, div но поскольку высота md-select отличается от высоты input , элементы не выглядят выровненными. Без второго center элементы выровнены по верхней части родительского div элемента, и это заставляет их выглядеть выровненными.