使用 Angular v11 和 Angular Material Form field如何让 textarea mat-form-field 占据容器的整个空间(不是在我输入时自动增长,但即使是空的也会填充空间)?它应该是仅使用 CSS 的动态解决方案,因此随着页面大小的调整,文本字段也会调整大小。
这是 pic of actual page I'm working on .我试图在 stackblitz 上制作 sample ,但是 Material UI 甚至没有在那里正确显示 - 可以吗?仍然希望它有助于澄清我的问题。
最佳答案
如果我理解正确你的问题,你可以在你的 style.css
文件中添加这个 CSS。并将 fill-container
添加到 mat-form 字段元素
.mat-form-field.fill-container,
.mat-form-field.fill-container .mat-form-field-infix,
.mat-form-field.fill-container .mat-form-field-flex,
.mat-form-field.fill-container .mat-form-field-wrapper {
height: 100%;
width: 100%;
}
.mat-form-field.fill-container textarea {
height: calc(100% - 25px);
}
在模板中
<mat-form-field appearance="fill" class="fill-container">
<mat-label>Textarea</mat-label>
<textarea matInput [matTextareaAutosize]="false"></textarea>
</mat-form-field>
这是 stackblitz 示例。 https://stackblitz.com/edit/angular-9ms3ph?file=src/app/form-field-overview-example.html
此外,如果您可以使用 matTextareaAutosize
而不是这种样式,我建议使用此 @Input
属性
像这样
<div>
<mat-form-field appearance="fill" class="test">
<mat-label>Textarea</mat-label>
<textarea matInput [matTextareaAutosize]="true"></textarea>
</mat-form-field>
</div>
关于Angular Material UI TextArea 填充高度/宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65172652/