Angular Material 对话框垫对话框 Action 位置

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

Github 问题跟踪此 https://github.com/angular/components/issues/4609

包含 DanielHabenicht 的更清洁的修复(没有魔数(Magic Number))
https://github.com/angular/components/issues/4609#issuecomment-528865962

// app.module.ts
import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';
...
providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {panelClass: 'mat-dialog-override'}}
]
...


// overrides.scss or styles.scss
// This fixes https://github.com//issues/4609
.mat-dialog-override {
  height: 0px;
  mat-dialog-container {
    > :first-child {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    mat-dialog-content,
    div[mat-dialog-content] {
      flex-grow: 1;
      max-height: unset;
    }
  }
}