Material-UI adds padding to the body tag when a dialog is opened

user_5789381 0
Viewed 9585

I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag. I also checked the Material-UI site, and this is happening on their website too with dialogs.

Is this a bug with the new version of Material-UI?

How can I remove this padding from the body tag when opening a dialog?

Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.

material-ui reactjs dialog
6 Answers

as it was mentioned by @Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:

<Select
    className={classes.select}
    inputProps={{MenuProps: {disableScrollLock: true}}}
    ...
/>

Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.

user_73658090

Just give disableScrollLock={ true }. I think it will solve the issue because I had the same.

user_139740740

I added disableScrollLock prop to my Dialog Component. It worked.

user_140986870
user_118943880

For me the solution was to add 

overflow: auto;

to the #root selector:

#root { 
    ... other css that was there before
    overflow: auto;
}
user_118849760

I add in my main css file the following snippet of code and I get rid of body margins:

body {
    margin: 0;
}
user_35819760
Related