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

Question

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.

Benefice

Answer 1

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.

Retrocede

Answer 2

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

Percept

Answer 3

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

Johannesburg

Answer 4

You can use a mui-fixed class for handling this issue, it's helpful for me.

Here is a link for material UI mui-fixed document : https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened

Hope this will help anyone.

Prescriptible

Thanks for your response. How to use this class to fix the problem? I mean, this class should be assigned to which tag or component? – Benefice

If I assign the mui-fixed class to the main div tag that I have, the padding will be doubled. – Benefice

You need to add this class to the main div of your component. – Prescriptible

It didn't work. The documentation said that this class is for preventing the movement of elements when the scrollbar is removed by modal. But, I don't have a scrollbar. – Benefice

Answer 5

For me the solution was to add

overflow: auto;

to the #root selector:

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

Biradial

Answer 6

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

body {
    margin: 0;
} 

Jaquith

Answer 7

I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.

 sx={{
      [theme.breakpoints.up("xs")]: {
        padding: 0
      },
    }}

Rae

Answer 8

Adding padding: 0; to the globals.css with !important solves it for me:

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  padding: 0 !important;
}

Kory