角材料对话框的mat-dialog-actions位置

Question

我正在使用Angular Material Dialog component，具有mat-dialog-content和mat-dialog-actions以显示带有动作按钮的页脚。

如果我设置对话框的高度（例如80％），则对话框动作比默认值高。

Here is a forked stackblitz of an official example

我刚刚设置了高度：80％

const dialogRef = this.dialog.open(DialogContentExampleDialog, {
  height: '80%',
  width: '520px'
});

这里是结果：

我认为这是一个问题:)但是您有什么看法？是否可以轻松修复它？

谢谢！

Answer 1

您可以“拉伸”您的mat-dialog-content。

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content style="height: calc(100% - 96px);">     <-- height of dialog minus title and actions height
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>