Dialog with Title and Content prevents overflow

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

https://mui.com/material-ui/

MIT License

93.76k stars 32.24k forks source link

Dialog with Title and Content prevents overflow #27978

Open trickreich opened 3 years ago

trickreich commented 3 years ago

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

Label should be shown full.

Steps to Reproduce 🕹

https://codesandbox.io/s/materialui-dialog-tb1g4?file=/index.js

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @material-ui/envinfo` goes here. ```

eps1lon commented 3 years ago

Thanks for the report.

Seems to be caused by overflow-y: https://github.com/eps1lon/material-ui/blob/64c527a818756ae1b0ba88a3236f11b6060a7315/packages/material-ui/src/DialogContent/DialogContent.js#L31

One would need to figure out why this CSS property is set by default. In the meantime, you can fix it by setting overflow-y to 'initial' in your DialogContent.

trickreich commented 3 years ago

Thanks for your quick response.

I just saw this big thread about scrolling in Dialog: https://github.com/mui-org/material-ui/issues/13253

Gautam-Arora24 commented 3 years ago

@eps1lon Can I work on this issue?

Gautam-Arora24 commented 3 years ago

@eps1lon How can I check what changes my code does locally? I mean I want to test it somewhere before pushing it.

eps1lon commented 3 years ago

@Gautam-Arora24 Please check https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md and https://github.com/mui-org/material-ui/blob/next/test/README.md