[Dialog] Fix Joy UI modal dialog overflow viewport #36103
Conversation
siriwatknp
added
bug 🐛
Netlify deploy previewBundle size report |
Co-authored-by: Amandeep Singh Malhotra <amandeep.malhotra.894@gmail.com> Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
There was a problem hiding this comment.
Nice to see it fixed 👍
In the future, we will see if developers come up with use cases to pick the scroll anchor like in https://mui.com/material-ui/react-dialog/#scrolling-long-content.
|
|
||
| By default, `ModalDialog` will not overflow the screen when the content is longer than the viewport. | ||
|
|
||
| You have to apply CSS [`overflow="scroll | auto"`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) to the content. |
There was a problem hiding this comment.
Per the comment below
| You have to apply CSS [`overflow="scroll | auto"`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) to the content. | |
| You have to apply CSS [`overflow="auto"`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) to the content. |
| </FormControl> | ||
| <List | ||
| sx={{ | ||
| overflow: scroll ? 'scroll' : 'initial', |
There was a problem hiding this comment.
I have almost never see a case where overflow: scroll makes sense. Here is another example that reinforces it. Here is how it looks on Windows:
Same on macOS if you enable the nonempty scrollbar which I highly recommend as it matches Windows which is >50% of what end-users experience
auto will remove the scrollbar at the bottom.
| overflow: scroll ? 'scroll' : 'initial', | |
| overflow: scroll ? 'auto' : 'initial', |
There was a problem hiding this comment.
Another example why "nonempty scrollbar which I highly recommend": the transition jumps in on Windows https://deploy-preview-36103--material-ui.netlify.app/joy-ui/react-modal/#transition
While it doesn't on MUI Base and Material UI.
oliviertassinari
changed the title
close #36094
Fix
Fixed by setting
maxHeightand making the ModalDialog a flex column by default, so that the children with long content can be full height overflow