Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Setting dialog max-height does not work
See original GitHub issueBug, 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!
Issue Analytics
- State:
- Created 6 years ago
- Reactions:9
- Comments:13
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I think I found a relatively simple solution.
See stackblitz example and my comments in dialog-content-example.ts.
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…