Угловое расположение материала не соответствует

Question

Угловое расположение материала не соответствует

0

У меня проблема с проектированием простой формы.

<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>

Вот как это выглядит, я не знаю, что я делаю что-то неправильно? Я новичок в этой структуре. Я хочу, чтобы все входы были выровнены по одной базовой линии, и я не добавлял значки перед текстовыми вводами.

Matjaž Mav 23 янв. 2016, в 21:56

Источник

1

проверить живой HTML. под входами находятся некоторые дополнительные элементы ошибок. Я также нашел это трудным путем и должен был подстроить поля. Функция мне не понравилась и должна быть настраиваемой
charlietfl 23 янв. 2016, в 20:28

Теги:

angularjs

angular-material

responsive-design

material-design

2 ответа

Ещё вопросы

проверить живой HTML. под входами находятся некоторые дополнительные элементы ошибок. Я также нашел это трудным путем и должен был подстроить поля. Функция мне не понравилась и должна быть настраиваемой

kuhnroyal · Answer 1 · 2016-01-24T09-49-00.000Z

На данный момент известны проблемы с выравниванием ввода. Вам нужно будет настроить некоторые поля, если вы хотите выровнять их самостоятельно.

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>

Проверьте документацию для получения дополнительных примеров ввода.

DavidNJ · Answer 2 · 2016-01-24T00-31-00.000Z

У вашей структуры есть только один 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>