Question

我在设计简单表格方面遇到了问题。

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

这是它的样子，我不知道我做错了什么？我是这个框架的新手。我希望所有输入都与同一基线对齐，我不想在文本输入前添加图标。

Answer 1

目前输入对齐存在已知问题。如果你想自己调整边距，你必须调整一些边距。

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>

检查documentation以获取更多输入示例。

Answer 2

您的结构在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>

角度材质布局不一致

2 个答案: