У меня проблема с проектированием простой формы.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
Вот как это выглядит, я не знаю, что я делаю что-то неправильно? Я новичок в этой структуре. Я хочу, чтобы все входы были выровнены по одной базовой линии, и я не добавлял значки перед текстовыми вводами.
На данный момент известны проблемы с выравниванием ввода. Вам нужно будет настроить некоторые поля, если вы хотите выровнять их самостоятельно.
https://github.com/angular/material/issues/6636
https://github.com/angular/material/issues/6219
Вы можете получать значки в контейнерах ввода, указав <md-icon>
.
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
Проверьте документацию для получения дополнительных примеров ввода.
У вашей структуры есть только один md-content
в layout="column"
. Для того, чтобы сложить md-input-container
и md-datepicker
элементы, которые необходимо добавить layout="column"
в form
тега <form name="search" layout="column">
который является тег, который является родителем к теги, которые вы хотите добавить в столбец.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search" layout="column">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>