Question

我正在开发一个角度为8的项目，在这里我使用MatDialog在对话框中打开带有表单输入的新组件。例如：

import {MatDialog} from '@angular/material/dialog';

import {AddDialogComponent} from '../add-dialog.component';

constructor(private dialog: MatDialog){
}

private addNewRow() {

    const dialogRef = this.dialog.open(AddDialogComponent, {

      width: 'auto',
      height: 'auto',
      maxHeight: '100vh',
      maxWidth:'100vw',
      data: Data
    });
    dialogRef.afterClosed().subscribe(
      result => {

         // statements
      });
  }

在此对话框打开时， maxWidth：'100vw'在不支持 maxHeight：'100vh'的情况下可以正常工作。还尝试了 maxHeight：'100vh！important'，并尝试从.css文件更改样式。

两个都不起作用。对于此问题的任何建议或解决方案将不胜感激。

谢谢。

Answer 1

这是因为.mat-dialog-content有一个max-height: 65vh。您可以决定不使用该指令，也可以在CSS中覆盖该指令：

.mat-dialog-content {
  max-height: initial;
}

working example

Answer 2

API建议在maxWidth或maxHeight ...内输入数字或字符串

但是我们可以使用::ng-deep将其放入CSS中。请注意，渲染的.cdk-overlay-pane的内联最大宽度为80％，因此我们必须使用{{1} }否则，我们可以通过CSS

相关CSS ：

100% !important

工作stackblitz here

Answer 3

打开对话框时，您可以通过以下方式提供属性，它将全屏打开对话框

const dialogRef = this.dialog.open(exampleDialog, {
  height: '100vh',
  width: '100vw',
  maxHeight: '100vh',
  maxWidth: '100vw',
});

角度8：材质对话框的max-height属性不起作用

3 个答案: