Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Modal] Scrollbar and padding issue

See original GitHub issue

When a Menu opens, the page’s scrollbar disappears. This may affect page layout. In my case, it jumps everything over to the right, which is a visual bug.

Solution

Either A) fix this in the library, or B) Note this behavior in the docs, and provide ways of solving it:

https://material-ui-next.com/demos/menus/

The container for the things jumping is absolute, left: 0, right: 0, with sections that are either text-align: center or display: flex; flex-direction: column; align-items: center;

Your Environment

Tech	Version
Material-UI	1.0.0-beta.29

Related issues

These are all closed, and I didn’t find the solution in them:

#8475 #7431 #6656 #8710

Issue Analytics

State:
Created 6 years ago
Reactions:35
Comments:53 (19 by maintainers)

Top GitHub Comments

55reactions

Toshiukcommented, Nov 27, 2019

The way I fixed it was just add disableScrollLock={ true } in my component 😃

16reactions

samheymancommented, Mar 1, 2020

The solution re-iterated by @Toshiuk is to simply add the following:

Menu, StyledMenu: disableScrollLock={ true }
Select: MenuProps={{ disableScrollLock: true }}

We really need to make solutions more easily findable! 😃

Top Results From Across the Web

Scrollbar and padding issue #23489 - [Modal] RTL - GitHub

The issue is about padding being added to the right side of the body instead left side for RTL. The issue is present...

Stop Modal from shifting with scrollbar using Material-UI's "mui ...

I can fix this with the "mui-fixed" class, but it adds extra padding on the right side of the modal that looks bad....

Modal - Bootstrap

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for...

Prevent Page Scrolling When a Modal is Open | CSS-Tricks

If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to...

Modal Window pushes the sites content (Example) - Treehouse

Cause: Bootstrap applies a right padding of 29px every time modal is displayed in order to compensate for the browser's vertical scrollbar width ......