Setting dialog max-height does not work #8493

swftvsn · 2017-11-16T22:16:33Z

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!

The text was updated successfully, but these errors were encountered:

RobertPaulson90 · 2017-11-21T13:29:13Z

Same issue :(

diogodomanski · 2017-12-13T10:00:35Z

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

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

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

wojtek1150 · 2017-12-18T14:01:16Z

Same issue

RobertPaulson90 · 2017-12-19T07:38:55Z

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

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes #2481. Fixes #3239. Fixes #6584. Fixes #8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

mstawick · 2018-02-06T10:31:47Z

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

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes #2481. Fixes #3239. Fixes #6584. Fixes #8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes #2481. Fixes #3239. Fixes #6584. Fixes #8493.

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

dgroh · 2018-11-26T12:55:13Z

same issue

insidewhy · 2018-12-13T13:03:07Z

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 · 2018-12-14T12:03:14Z

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 · 2019-02-01T06:43:56Z

Seems like doing something like the following works.

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

fuzolan · 2019-02-25T10:39:04Z

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...

* Improves the handling of scrollable content inside the `mat-dialog-content` by using flexbox, rather than a hardcoded `max-height`, to define the content height. This resolves various issues where the dialog would go out of the screen at certain screen sizes or have multiple scrollbars. * Uses flexbox to ensure that the dialog content elements are always at the appropriate size. Fixes angular#2481. Fixes angular#3239. Fixes angular#6584. Fixes angular#8493.

jhuiet · 2019-05-09T05:45:18Z

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 · 2019-10-31T09:11:35Z

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

joschne · 2019-12-11T10:33:36Z

I think I found a relatively simple solution.

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

tsupryk · 2023-06-13T14:02:07Z

Having same issue in latest Material v15 !!!

swftvsn mentioned this issue Nov 16, 2017

Dialog position and size problems #4574

Closed

jelbourn assigned crisbeto Nov 16, 2017

crisbeto added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Nov 28, 2017

crisbeto added the has pr label Jan 4, 2018

crisbeto linked a pull request Jan 4, 2018 that will close this issue

fix(dialog): improved handling of scrollable content #9236

Open

crisbeto mentioned this issue Feb 21, 2018

mat dialog actions hiding/overflow #9840

Closed

andrewseguin added the area: material/dialog label Jun 11, 2020

mmalerba removed the has pr label Dec 8, 2022

andrewseguin unassigned crisbeto Jun 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setting dialog max-height does not work #8493

Setting dialog max-height does not work #8493

swftvsn commented Nov 16, 2017 •

edited

RobertPaulson90 commented Nov 21, 2017

diogodomanski commented Dec 13, 2017

wojtek1150 commented Dec 18, 2017

RobertPaulson90 commented Dec 19, 2017

mstawick commented Feb 6, 2018

dgroh commented Nov 26, 2018

insidewhy commented Dec 13, 2018

insidewhy commented Dec 14, 2018

drorm commented Feb 1, 2019

fuzolan commented Feb 25, 2019

jhuiet commented May 9, 2019 •

edited

akvaliya commented Oct 31, 2019

joschne commented Dec 11, 2019

tsupryk commented Jun 13, 2023

Setting dialog max-height does not work #8493

Setting dialog max-height does not work #8493

Comments

swftvsn commented Nov 16, 2017 • edited

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

Is there anything else we should know?

RobertPaulson90 commented Nov 21, 2017

diogodomanski commented Dec 13, 2017

wojtek1150 commented Dec 18, 2017

RobertPaulson90 commented Dec 19, 2017

mstawick commented Feb 6, 2018

dgroh commented Nov 26, 2018

insidewhy commented Dec 13, 2018

insidewhy commented Dec 14, 2018

drorm commented Feb 1, 2019

fuzolan commented Feb 25, 2019

jhuiet commented May 9, 2019 • edited

akvaliya commented Oct 31, 2019

joschne commented Dec 11, 2019

tsupryk commented Jun 13, 2023

swftvsn commented Nov 16, 2017 •

edited

jhuiet commented May 9, 2019 •

edited