layout-align=center не работает Angular

Я пытаюсь выровнять по центру текст ввода/редактирования на карточке, используя атрибут layout-align. Однако из-за моего невежества и младенчества (начал учиться сегодня) я не могу понять, почему текст редактирования не будет выравниваться по центру внутри этого представления карты.

<div flex="50" layout="row" layout-align="center">
    <md-card flex="50">
        <md-input-container layout-align="center center" class="md-block" flex="50">
            <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
        </md-input-container>
    </md-card>
</div>

Демо здесь: https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0


angularjs angular-material cardview
person Umer Farooq    schedule 15.11.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В соответствии с руководством по материалам вам нужно поместить контейнер ввода в элемент строки,

<md-card flex="50">
    <div layout="row" layout-align="center center">
        <md-input-container  flex="50">
            <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
        </md-input-container>
    </div>
</md-card>

ДЕМО

person Sajeetharan    schedule 15.11.2016
comment
Означает ли это, что если у меня есть 10 контейнеров ввода и кнопка, мне придется поместить их все в отдельные элементы div с layout=row? - person Umer Farooq; 15.11.2016
comment
@UmerFarooq да, тебе нужно - person Sajeetharan; 15.11.2016
comment
Я уже пробовал это, и, похоже, это работает, но разве это не дополнительная работа для компилятора/рендерера в браузере, которая может привести к снижению производительности (что, по-видимому, может быть незаметно в некоторых областях)? Плюс это также кажется очень утомительным и дополнительной работы - person Umer Farooq; 15.11.2016
comment
Вот как вы поступили бы, даже если бы использовали бутстрап - person Sajeetharan; 15.11.2016
comment
ой ок тоже никогда не пробовал. Похоже, что механизм рендеринга здесь отличается от того, как мобильные фреймворки отображают представления. Спасибо! - person Umer Farooq; 15.11.2016

arrow_upward
0
arrow_downward

Чтобы центрировать md-input-container, вы должны окружить его div с layout="row". Это поможет выровнять его по горизонтали, однако, чтобы выровнять его по вертикали, вам нужно дать вашему div немного height. Ваш md-card должен выглядеть примерно так: (обратите внимание, что вы можете указать height по своему выбору в зависимости от того, как вы хотите, чтобы md-input-container выровнялось по вертикали)

<md-card flex="50">
    <div layout="row" layout-align="center center" style="min-height: 100%">
        <md-input-container class="md-block" flex="50">
            <input required type="text" placeholder="Observation Number"
                ng-model="learningCenter.observations.obsNum"/>
        </md-input-container>
    </div>
</md-card>

Вот рабочий вариант вашего кода.

person Divyanshu Maithani    schedule 15.11.2016