CODEWITHSUNDEEP
javascripthtmlcssangularangular-material
Pujan
Pujan

Reputation: 161

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

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.

Upvotes: 14

Views: 28734

Answers (4)

Poul Kruijt
Poul Kruijt

Reputation: 71961

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

Upvotes: 21

B.Habibzadeh
B.Habibzadeh

Reputation: 538

actually in the upper version of angular material this style work for me

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

Upvotes: 3

Hiren More
Hiren More

Reputation: 27

When opening dialog you can provide properties following way and it will open dialog in full screen

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

Upvotes: -3

Akber Iqbal
Akber Iqbal

Reputation: 15041

API suggests that a number or a string is fine inside maxWidth or maxHeight...

But we can use ::ng-deep would help when putting this inside CSS... Note that the rendered .cdk-overlay-pane has an inline max-width of 80%, so we had to use 100% !important otherwise, we are able to do this via CSS

relevant 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%; }

working stackblitz here

Upvotes: 0

Related Questions