[Dialog] Incorrect style on Dialog when maxWidth is set to false
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Setting maxWidth={false}
on the Dialog component adds a MuiPaper-maxWidthFalse
class to the paper div in the dialog.
In the css for the generated class I see
max-width: undefinedpx
Expected behavior 🤔
Setting maxWidth={false}
should not add a class to the MuiPaper component which will leave the maxWidth property unset.
Steps to reproduce 🕹
Steps:
- Navigate to https://codesandbox.io/s/simpledialog-material-demo-forked-u2nl0u
- Click on the
Open Simple Dialog
button - Right click and inspect the Dialog paper and find the div with the
MuiPaper-root
class - The div also has a
MuiPaper-maxWidthFalse
class and inspecting the css reveals amax-width: undefinedpx
property
Context 🔦
I was working on adding custom breakpoints to an application and testing that the new breakpoints worked as expected with the Dialog component. I noticed the max-width: undefinedpx
in the diffs of my snapshots test and although it doesn’t seem to break anything for me, it still seemed like maybe worth fixing if it is a simple fix.
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Issue Analytics
- State:
- Created a year ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
To do this, I added a new option to the config - fluid: true , which says to make the dialog responsive. I...
Read more >Dialog Widget | jQuery UI API Documentation
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and...
Read more >jQuery UI Dialog maxWidth Option - GeeksforGeeks
The jQuery UI Dialog maxWidth option is used to set the maximum width to which the dialog can be resized in pixels. Syntax:....
Read more >Set DialogFragment width and height | by Robert Mirabelle
This article was originally written many years ago. Thankfully, it's now considerably easier to control the width and height of your DialogFragment.
Read more >How to Setting maxHeight to the Dialog in Vue ... - Syncfusion
We have an option to set the maxHeight of the Dialog in the beforeOpen event. ... node_modules/@syncfusion/ej2-vue-popups/styles/material.css"; ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think you mean
paperWidthFalse
class, notmaxWidthFalse
class. However, it is correct that theMuiDialog-paperWidthFalse
class is applied. It’s just thatmax-width: undefinedpx
style shouldn’t get applied whenmaxWidth={false}
is passed.I’m happy to make a PR with this change