Components: Setting dialog max-height does not work

[swftvsn]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To be able to change the max-height of the dialog

What is the current behavior?

It does not work.

What are the steps to reproduce?

http://plnkr.co/edit/X17ETao12PtHTKmpqV5s?p=preview
The dialog in question is configured to be

const settings: MatDialogConfig = {
  maxWidth: '99vw',
  maxHeight: '99vh'
}

But the height is the default one. It seems that the cdk-overlay-0 is correctly styled with style="max-width: 99vw; max-height: 99vh;" but the inner div.mat-dialog-content has max-height: 65vh; which dictates the height.

All the relevant code is in app.component.ts.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All / latest

Is there anything else we should know?

Keep up the good work!

[binaryPUNCH]

Same issue :(

[diogodomanski]

Did you try to set height and/or width too?

const settings: MatDialogConfig = {
  maxWidth: '99vw',
  maxHeight: '99vh',

  width: '99vw',
  height: '99vh'
}

[wojtek1150]

Same issue

[binaryPUNCH]

My case was a user issue, what I wanted was minHeight

[mstawick]

FYI, as a workaround I've applied maxHeight via panelClass class, and then it works as expected (as far as I can tell).

[dgroh]

same issue

[insidewhy]

The .mat-dialog-content has a fixed max height of 65vh, so setting a maxHeight (or even minHeight) beyond 65vh can lead to trouble. You have to override the css at the same time.

[insidewhy]

I've been fighting this with a designer for about 24 hours now, there are a large number of barriers to getting the dialog styled correctly. It almost seems as if many material components are too limited when it comes to customization options. One of the other designers I'm working with is also starting to get disillusioned with how difficult it can be to use anything but the restrictive defaults.

[drorm]

Seems like doing something like the following works.

.mat-dialog-content { max-height: 95%; }

[fuzolan]

Seems like doing something like the following works.

.mat-dialog-content { max-height: 95%; }

had no effect in my case. A simple fullscreen option would be nice. If you want to use mat-dialog-actions then you get another problems...

[jhuiet]

I know this isn't the 'best' practice, but I found a simple fix for me: an inline style addition!

<mat-dialog-content style="max-height: 85vh">

This was where I landed after needing scrolling on smaller screens (note the mat-dialog-content tag) and not wanting scrolling on larger screens...

[akvaliya]

Any progress on this issue? It's been long time. I am facing the same issue. maxHeight has no effect on dialog.

[joschne]

I think I found a relatively simple solution.

See stackblitz example and my comments in dialog-content-example.ts.