Material-ui: [Menu] open causes vertical scrollbar to disappear

Created on 15 Sep 2016 · 7Comments · Source: mui-org/material-ui

Problem description

Open any menu, and the browser vertical scrollbar disappears. This is really disorienting for my case where I have a right aligned appbar #avatar that opens a small menu (it bounces the screen).

It seems that when the menu opens, <body> changes to <body style="overflow: hidden; padding-right: 15px;">

Steps to reproduce

next branch, menus demo http://localhost:3000/#/component-demos/menus

Observe the vertical scroll bar
Open a menu
Observe the vertical scroll bar is missing

Versions

next branch a38068f90c28ee240f0622d40a87f6d888dd74e2

Browser: Mac Chrome 52.0.2743.116
Browser: Mac Firefox 47.0.1
Browser: Mac Firefox 48.0.2
Browser: Mac Safari 9.1.2

Images

Scrollbar before opening menu

material_ui

No scrollbar after opening menu

material_ui

bug 🐛 Menu

Source

rosskevin

Most helpful comment

When I haven't got scrollbar on the page, the padding-right: 15px is applied to body element and the whole website layout bounces to the left with 15px width stripe on the right side...
screen shot 2017-10-17 at 08 18 35

ketysek on 17 Oct 2017

👍4

All 7 comments

Should be fixed by #7239

oliviertassinari on 25 Jun 2017

ketysek on 17 Oct 2017

👍4

I noticed the same behaviour @ketysek. Those 15px padding-right are also applied to appBar components making them bouncing when you open a modal or selectbox. Should we have to open a new issue @oliviertassinari for this ?

marcoturi on 20 Oct 2017

@marcoturi We have add a new issue for this #8710.

oliviertassinari on 20 Oct 2017

Thank you @oliviertassinari, your code fix the issue. However if you have elements in the page aligned with margin: 0 auto; you will still get the bounce effect on them. To fix it i had to use flexbox to align them (i.e. justifyContent: 'center'). Hope it helps.

marcoturi on 20 Oct 2017

@oliviertassinari I still have the exact problem on v4