угловой материал диалог мат-диалог-действия позиция

Question

Я использую Компонент Angular Material Dialog , с mat-dialog-content и mat-dialog-actions для отображения нижнего колонтитула с помощью кнопок действий.

Если я установил высотудиалоговое окно (например, 80%), диалоговые действия странно выше, чем значение по умолчанию.

Вот разветвленный стэк в официальном примере

Я просто установил высоту: 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>