Angular 8: max-height attribute for a material dialog is not working

Question

I am working on a project in angular 8, where I have used a MatDialog to open new component with form inputs in a dialog. For example:

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
      });
  }

Here when dialog get open, maxWidth: '100vw' works fine where as maxHeight: '100vh' is not supported. Also tried maxHeight: '100vh !important' and tried change style from .css file.

Both didn't work. Any suggestions or solution for this issue will be highly appreciated.

Thank you.

Answer 1

It's because the .mat-mdc-dialog-content has a max-height: 65vh. You can either decide not to use the directive, or override this in your css:

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

working example