当我创建一个包含要用fxLayoutGap和grid选项显示的内容的模式窗口时,对话框内容区域的高度计算不正确。不但没有放大对话框,反而发生溢出。
StackBlitz:https://stackblitz.com/edit/Angular-Material-JROR5H
模态组件的代码:
<mat-dialog-content class="mat-typography">
<div fxLayout="row wrap" fxLayoutAlign="start start" fxLayoutGap="20px grid">
<div fxFlex="33.3">
<mat-form-field appearance="outline">
<mat-label>FormControl 1</mat-label>
<input matInput placeholder="FormControl 1" type="text">
</mat-form-field>
</div>
<div fxFlex="66.7">
<mat-form-field appearance="outline">
<mat-label>FormControl 2</mat-label>
<input matInput placeholder="FormControl 2" type="text">
</mat-form-field>
</div>
<div fxFlex="33.3">
<mat-form-field appearance="outline">
<mat-label>FormControl 3</mat-label>
<mat-select>
<mat-option [value]="true">yes</mat-option>
<mat-option [value]="false">no</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex="33.3">
<mat-form-field appearance="outline">
<mat-label>FormControl 4</mat-label>
<input matInput placeholder="FormControl 4" type="text">
</mat-form-field>
</div>
<div fxFlex="33.3">
<mat-form-field appearance="outline">
<mat-label>FormControl 4</mat-label>
<input matInput placeholder="FormControl 4" type="text">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>FormControl 5</mat-label>
<input matInput placeholder="FormControl 5" type="text">
</mat-form-field>
</div>
<div fxFlex="50">
<mat-form-field appearance="outline">
<mat-label>FormControl 6</mat-label>
<input matInput placeholder="FormControl 4" type="text">
</mat-form-field>
</div>
</div>
</mat-dialog-content>
使用fxFlexFill指令获得正确的高度
<div fxLayout="row wrap" fxFlexFill fxLayoutAlign="start start" fxLayoutGap="20px grid">
您可以在从对话框配置打开模式之前设置模式的高度:
openModal() {
this.dialog.open(ModalComponent, {
height: '400px'
});
}
在表单中包含mat-dialog-content,这是错误的。
mat-dialog-content是您的模态内容的父项,而mat-dialog-actions可以用作此内容的页脚