angular / angular/components

Setting dialog max-height does not work

Open
#8,493 18 comments 13 reactions 0 assignees View on GitHub
area: material/dialog P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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!

Contributor guide

Open the contributing guide

Research direction

Start with app.component.ts and the linked Plunker reproduction, where MatDialogConfig sets maxWidth and maxHeight while the inner mat-dialog-content retains a 65vh limit. Confirm the height constraint and consider the issue complete when the dialog respects the configured max-height.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.