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

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

Вот форк stackblitz официального примера

Я просто установил высоту: 80%

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

Вот результат:

enter image description here

На мой взгляд, это проблема :) но каково ваше мнение? Возможно ли это легко исправить?

Благодарность!

10
user2010955 28 Окт 2019 в 11:22

2 ответа

Вы можете "растянуть" свой 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>
1
JuNe 28 Окт 2019 в 12:51
Да, я поступил именно по-твоему, мне просто не нравится это магическое число в расчете ... Пока не нашел лучшего решения.
 – 
user2010955
28 Окт 2019 в 13:06
Действительно хорошее решение. Очень хорошо работает! Хотя это странное поведение mat-dialog, я должен взломать его таким образом, чтобы кнопки прилипали к нижней части диалога.
 – 
Torsten Barthel
3 Мар 2020 в 07:19

Решение @JuNe работает очень хорошо и полностью реагирует. Единственное, что я должен добавить, это небольшая настройка, которая мне нужна, чтобы все заработало. Мне пришлось явно установить максимальную высоту mat-dialog-content , чтобы отключить:

style="height: calc(100% - 96px);max-height: unset"
0
Torsten Barthel 3 Мар 2020 в 09:39