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.

Solution

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

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

working example

Comments

[Pujan]

I am aware of it. After all I have also did the changes you mentioned. But need to make "max-height" work for .mat-dialog-container.

[Pujan]

Except "max-height", all other attribute works. Try adding more text/contents inside <div mat-dialog-content> </div> in your example. scrollbar appears to scroll up down, but the height doesn't go to max-height(100vh).

[Akber Iqbal]

Hey @Pujan, try this 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%; } which is also updated on the stackblitz link...