我在 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>
我希望“描述”字段是多行的,并填满可用的屏幕空间(高度)。它不会那样做。此外,布局字段的呈现方式与我预期的不同。在其外观的屏幕显示下方,寻找进行此类布局的正确方法。
最佳答案
这就是我的做法 - 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
有一个带有flex
(相当于flex="100
)的父级div
,因此它放大,layout="column
和overflow-y: auto
(这样溢出的文本可以滚动)textarea
具有flex
以便填充其父级
关于css - Angular Material 形式的填充高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38295264/