[Bug] Modals move other UI elements when opening and closing

[rickstaa]

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-kit-pro-react/#/components

Operating System

Ubuntu 20.04, windows 10

Device

Hp Zbook G5

Browser & Version

Chrome v8.0.4324.150, firefox v85.0.1

Steps to reproduce

1. Open the material-kit-pro-react demo website.
2. Go to the components page.
3. Click one of the modals.
4. See the header and right dots jump.

What is expected?

I expected the other UI components to stay still when toggling the modal.

What is actually happening?

Currently, some elements are moved when the modal is opened and closed.

---

Solution

I did not yet find a solution to this problem. It looks like it is related to the scrollbar. I tried the solutions in this stackoverflow post but they don't seem to work.

Additional comments

Seems to be related to:

• Dialogs cause the vertical scrollbar to disappear and reappear mui/material-ui#6656
• [Modal] Scrollbar and padding issue mui/material-ui#10000
• [Select][material-ui] Don't lock the body scroll and make it non-modal select mui/material-ui#17353

[einazare]

Hello there, @rickstaa ,

Unfortunately, this cannot be solved.
It is because on Windows devices, the Scrollbar, when you open a modal, it disappears. And there is no way of solving this. It is the browser default behavior.

Best,
Manu

[rickstaa]

@einazare I think your right. It seems to occur on Linux and Windows. I think if this is solvable it should be done in the material-UI repository. You can follow the related issue here.

[rickstaa]

@einazare Actually it seems they already fixed in Material-UI v5.

[Tetedeiench]

To anyone coming accross this issue, this is caused by the Dialog setting "overflow-y: hidden" when appearing on the body, which causes the scrollbar to disappear.

A fix for me was to set 'overflow-y':'auto !important' on the body element (CSS).

It's probably not the best fix, but it does the trick wonderfully for me !

[rickstaa]

@Tetedeiench Thanks a lot for uploading the fix. I'm glad that your solution worked out for you. Maybe I'm doing it wrong but for me, in the new chrome/firefox browsers, this, unfortunately, does not work. Adding the overflow-y: auto !important property adds extra padding for the scrollbar but still moves the elements.

[Tetedeiench]

Hi @riskstaa,

Here's the problem reproduced on my (currently in dev) website :

And with the fix i mentioned :

I'm NOT an expert in frontend dev (quite the contrary), but the issue seems to be the dialog forcing overflow-y to hidden when appearing.

This in turn hides the scrollbar if any was displayed before the dialog appeared, which moves the page behind the dialog to deal with this.

Of course, make sure you force overflow-y to any value you currently use with the dialog closed. I use auto personally !

I think in your case, looking at your CSS, simply forcing "overflow: hidden !important" will prevent the dialog from fiddling with it when appearing and things should go smooth. Also, make sure you're doing the change before opening the dialog, as changing this value when the dialog is opened will make things shake ;)

The fix is just making sure the scrollbar stays in place when the dialog is opened.

Edits : lots of spelling mistakes and clarifications, sorry.

[WROIATE]

@Tetedeiench Thanks a lot for uploading the fix. I'm glad that your solution worked out for you. Maybe I'm doing it wrong but for me, in the new chrome/firefox browsers, this, unfortunately, does not work. Adding the overflow-y: auto !important property adds extra padding for the scrollbar but still moves the elements.

try add padding-right: 0 !important to body css