Angular 8: атрибут max-height для диалогового окна материала не работает

Question

Я работаю над проектом в angular 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! Важный' и пробовал изменить стиль из. css файла.

Оба не работали. Любые предложения или решения по этому вопросу будут высоко оценены.

Спасибо.

Answer 1

API предполагает, что число или строка в порядке внутри maxWidth или maxHeight ...

Но мы можем использовать ::ng-deep, это поможет при помещении этого значения внутрь CSS ... Примечание что отображаемое значение .cdk-overlay-pane имеет максимальную внутреннюю ширину 80%, поэтому нам пришлось использовать 100% !important, в противном случае мы можем сделать это с помощью CSS

релевантно CSS:

::ng-deep .cdk-overlay-pane { max-width: 100vw !important; max-height: 100vh; }
::ng-deep .cdk-overlay-pane .mat-dialog-container{
  background-color:lightgreen;
  max-width: 100vw;
  max-height: 100vh;
}
::ng-deep .cdk-overlay-pane .mat-dialog-container .mat-dialog-content { max-height: 100%; }

работает стек * здесь

Answer 2

Это потому что .mat-dialog-content имеет max-height: 65vh. Вы можете либо отказаться от использования директивы, либо переопределить ее в своем css:

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

рабочем примере