Question

我在Angular Material（Cordova应用程序）中有一个表单，它有三个输入：标题，日志类型和描述。然后有两个按钮可以保存和取消。这是代码的相关部分：

<md-content layout="column">

<div layout="row" layout-padding>
    <md-input-container layout-fill>
        <label>Title</label>
        <input type="text" ng-model="vm.newLog.Title" class="md-display-1" />
    </md-input-container>
</div>

<div layout="row" layout-padding>
    <md-input-container layout-fill>
        <label>LogType</label>
        <md-select ng-model="vm.newLog.LogType">
            <md-option ng-repeat="logType in vm.logTypes" value="logType.value">
                {{logType.display}}
            </md-option>
        </md-select>
    </md-input-container>
</div>

<div layout="row" layout-padding flex="noshrink" height="auto">
    <md-input-container layout-fill>
        <label>Description</label>
        <textarea ng-model="vm.newLog.Description" />
    </md-input-container>
</div>

<div layout="row" layout-padding layout-align="end center">
    <md-button ng-click="vm.cancelNew()" class="md-raised md-primary">CANCEL</md-button>
    <md-button ng-click="vm.saveNew()" class="md-raised md-primary">SAVE</md-button>
</div>

我希望“描述”字段为多行并填满可用的屏幕空间（高度）。它没有这样做。此外，布局字段的呈现方式与我预期的不同。在屏幕显示的下方，寻找正确的方式进行这样的布局。

Answer 1

我就是这样做的 - CodePen

标记

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-content layout="column" layout-fill layout-padding>
    <!-- Title -->
    <md-input-container flex="none">
      <label>Title</label>
      <input type="text" ng-model="vm.newLog.Title" class="md-display-1" />
    </md-input-container>

    <!-- Log Type -->
    <md-input-container flex="none">
      <label>LogType</label>
      <md-select ng-model="vm.newLog.LogType">
        <md-option ng-repeat="logType in logTypes" value="logType">
          {{logType}}
        </md-option>
      </md-select>
    </md-input-container>

    <!-- Description -->
    <div id="description" layout="column" flex>
      <md-input-container flex>
        <label>Description</label>
        <textarea ng-model="newLog.Description"></textarea>
      </md-input-container>
    </div>

    <!-- Buttons -->
    <div layout="row" layout-align="end center" flex="none">
      <md-button ng-click="vm.cancelNew()" class="md-raised md-primary">CANCEL</md-button>
      <md-button ng-click="vm.saveNew()" class="md-raised md-primary">SAVE</md-button>
    </div>
  </md-content>
</div>

CSS

#all {
  height: 100%;
}

#description {
  overflow-y: auto;
}

需要注意的事项是：

md-content的父级应该有全高，以便layout-fill填满整个高度
input和按钮div应该flex="none"，以便它们不会向上扩展
textarea的父div与flex相当（相当于flex="100），以便它可以扩展，layout="column和overflow-y: auto（所以过度流动的文字是可滚动的）
textarea有flex，以便填充其父

以角度材质填充高度

1 个答案: