Material-ui: [Modal] Scrollbar and padding 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
lorensr
All 47 comments
In my case, it jumps everything over to the right, which is a visual bug.
@lorensr Do you have a reproduction example? It's a well-known limitation of disabling the scrollbar. We handle absolute positioned elements that have the .mui-fixed class name.
We need to document it!
oliviertassinari
on 23 Jan 2018
FYI, another thing I've found is that the .mui-fixed fix only works if your fixed element also has
box-sizing: content-box;
pelotom
on 23 Jan 2018
Thanks, adding the class worked. I didn't need content-box. The element is border-box.
It should also be noted that when the scroll bar is removed, the block header inside my right: 0 element didn't stretch to the right edge of the browser.
Fixed by changing right: -20px, so now css is:
main {
position: absolute;
box-sizing: border-box;
left: 0;
right: -20px;
overflow-x: hidden;
}
The downside is that when the scrollbar is present, centered children are now 10 pixels to the right of center, and I have to hide overflow.
lorensr
on 25 Jan 2018
In some cases it's not possible to apply the mui-fixed css class to some fixed elements. For example the crisp chat widget at the bottom of my page. Probably happens with intercom widget as well.
Does anyone else have the same problem and found a solution?
abhishiv
on 16 Mar 2018
I had a similar issue, but the container was not absolute. What fixed it for me was adding !important to my padding like this:
padding: 0 !important;
michielglibert
on 5 Jun 2018
I'm not 100% sure if this is the correct way to do it but i added the following css properties to the <body> tag
```css
body {
position: absolute;
left: -17px;
right: -17px;
padding-top: 0;
padding-right: 17px;
padding-left: 17px;
padding-bottom: 0px;
overflow-x: hidden;
overflow-y: auto !important //Remove the !important if you want the scroll bar to disappear
}
````
chrisshaddad
on 10 Jul 2018
Hopefully this helps someone else:
After trying some various css overrides that seemed to work but felt wrong, such as @chrisshaddad's, I found we were getting shifting due to previously forcing overflow-y: scroll on our whole app. We had forced the y-axis scrollbar app-wide to prevent shifting due to our pages having varying lengths - some requiring y-axis scrolling, some not.
Instead of placing a bunch of extra body or inline styling, we were able to fix the shifting by isolating the overflow-y: scroll to the content below our fixed AppBar/Header. Now we have an evergreen scrollbar for the page content, rather than the whole window, along with no shifting from modals/menus since the scrollbar is attached to the page content and not the body.
For reference our DOM looks like:
<div>
<Header />
<div className="pageContent">
<div className="page">
<Route exact path="/pathToPage"> component={PageContent} />
</div>
</div>
</div>
and the CSS (our header's height is 45px):
.pageContent {
position: absolute;
top: 45px;
left: 0;
right: 0;
bottom: 0;
}
.pageContent .page {
height: 100%;
overflow-y: scroll;
}
cvocke
on 16 Jul 2018
Hello,
I currently have this same problem and I must admit that I cannot find my happiness in any of the solutions mentioned.
From what I understood, Modal does not allow to use the scrollbar, which is problematic because I use a Modal to perform an advanced search and a Modal doesn't always need to have a short content.
Thinking about the problem and the solutions you mentioned, I was wondering why it would not be possible for Material-UI to implement a scrollable property for everything related to Modal, Dialog, Menu and other popup elements. By default, this boolean property would be false, but could be true to allow a scrollbar to be displayed in the component.
If this is not possible, maybe implement a ScrollBar component outright, even if I prefer the idea before.
I suspect that this is easier said than done. I would therefore like to thank you for the exceptional work you are doing.
rememberYou
on 9 Sep 2018
FWIW I just set a global body { overflow-y: scroll } and everything seems to work nicely.
avdd
on 9 Sep 2018
@avdd This does not help since it will allow you to scroll in the body and not in the modal.
rememberYou
on 9 Sep 2018
@rememberYou The modal is a low level primitive, you might want to use the dialog instead: https://material-ui.com/demos/dialogs/#scrolling-long-content.
oliviertassinari
on 9 Sep 2018
@rememberYou ModalManager sets overflow:hidden directly on the container element (body) when the modal is visible and resets it when the modal is finished, so, yes it does work for me.
avdd
on 9 Sep 2018
@oliviertassinari thank you for the solution.
@avdd my apologies, I didn't try with the ModalManager.
rememberYou
on 9 Sep 2018
@lorensr Is this still an issue?
nathanmarks
on 10 Sep 2018
@oliviertassinari One last thing, I tried with the Dialog, it works well, but since I want a more particular design, I like to use the Modals.
The issue is that I have a Modal (Login) that has a link to open a second Modal (SignUp) that itself has a link to return to the Login.
In this case, do I have to use the ModalManager to easily add and remove a Modal? Sorry to get out of the subject of the issue, I didn't find any documentation on the subject.
rememberYou
on 10 Sep 2018
@nathanmarks yes, looks like modal components docs pages still don't mention .mui-fixed
lorensr
on 10 Sep 2018
Using 3.5.1 - the Dialog shifts to the left before closing.
Reproducible here https://material-ui.com/demos/dialogs/ - open and close the Simple Dialog demo.
After testing, this started in v3.3.
stephen099
on 14 Nov 2018
@stephen099 Thank you for reporting! I confirm, but it's a different issue.
oliviertassinari
on 22 Nov 2018
I've noticed that on the header (with the latest mui), the mui-fixed is added to the class names, but there is no styling assigned to it (by inspecting the header, there is no mui-fixed rule loaded.
I'm wondering, why is this 'add padding' happening in the first place, why is it needed? For me it's broken by the Menu component.
How do I prevent this from happening without having to override the css styling with !important ... ? Thanks
vajnorcan
on 27 Feb 2019
@vajnorcan The mui-fixed class name signals the modal component (used by the menu) that the element position will change when locking the scroll on the body element. We compensate for the scrollbar width removal with a temporary padding-right style. Could you provide a minimal reproduction example on CodeSandbox? Thank you.
oliviertassinari
on 27 Feb 2019
Sorry where do you put the .mui-fixed ? I have this problem with a select opening a menu.
capsule5
on 13 Mar 2019
@capsule5 You need to add it to the element that "jumps" due to the scrollbar being disabled on menu open (usually this should be an element fixed to the right) and its padding will be handled for you.
Also note that, as mentioned above, you may need to add this to your global styles:
.mui-fixed {
/*
* make sure that added right padding
* actually pushes contents to the left
*/
box-sizing: content-box;
}
cvara
on 22 Mar 2019
There is no reproduction in this thread. I'm closing.
@cvara We keep track of it in #9275.
oliviertassinari
on 12 Jul 2019
I don't get it, is this solved? I upgraded from v0.9 to v4 and now when I open modals my content jumps to the left (getting padding-right: 17px)? What's the recomended solution for it?
Later edit:
Because in my case I had overflow-y: scroll !important; I also had to add padding-right: 0px !important; to fix this jumping issue.
Cristy94
on 9 Nov 2019
The way I fixed it was just add disableScrollLock={ true } in my component :)
Toshiuk
on 27 Nov 2019
@Toshiuk which component?
wongjiahau
on 1 Dec 2019
@wongjiahau the Modal component v4+
sartios
on 4 Dec 2019
You can also add disableScrollLock to Menu
jeronimomora
on 14 Dec 2019
This is reproducing for me as well. Adding disableScrollLock is not plausible since I am using third party components that add the Menu items. This should be fixed. Maybe detect that the scrollbar actually displays or not.
archfz
on 14 Dec 2019
@archfz Do you have a reproduction?
oliviertassinari
on 15 Dec 2019
I'm witnessing this in use of Select components as well. Whenever a Select dropdown is opened, overflow: hidden, padding-right: 15px is added to the main body tag of my app. Is there a solution this besides overriding styles? I feel like this isn't expected behavior
WholemealDrop
on 17 Dec 2019
@WholemealDrop Follow #17353.
oliviertassinari
on 17 Dec 2019
@oliviertassinari ahah apparently my search skills aren't that great. Thank you!
WholemealDrop
on 17 Dec 2019
@oliviertassinari I have managed to reduce the problem to the core. The issue seems to be that somehow there is incorrect calculations when display: flex + minHeight: 100vh + body no padding and margin is combined. It seems like that the code expects to be a scrollbar there but in fact there is not. This code should reproduce the issue.
import React, {FunctionComponent, SyntheticEvent, useState} from 'react';
import {IconButton, Menu, MenuItem, Tooltip} from "@material-ui/core";
import TranslateIcon from "@material-ui/icons/Translate";
import MuiAppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
const AdminAppContainer: FunctionComponent = () => {
const handleMenu = (event: SyntheticEvent) => setAnchorEl(event.currentTarget);
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
const open = Boolean(anchorEl);
const handleClose = () => setAnchorEl(null);
const body = document.getElementsByTagName('body')[0];
body.style.margin = "0";
body.style.padding = "0";
return (
<div style={{ display: 'flex', minHeight: '100vh'}}>
<MuiAppBar color="secondary" >
<Toolbar>
<div style={{flex: 1}}></div>
<div>
<Tooltip title='asd'>
<IconButton onClick={handleMenu}><TranslateIcon /></IconButton>
</Tooltip>
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
<MenuItem key={'test'} onClick={handleClose}>Test</MenuItem>
</Menu>
</div>
</Toolbar>
</MuiAppBar>
</div>
)
};
@archfz Could you create a codesandbox please? (You could start with one of the docs examples.)
mbrookes
on 18 Dec 2019
@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark
archfz
on 18 Dec 2019
@archfz Sorry, missed this.
What am I looking for here? I don't experience any layout changes.
mbrookes
on 8 Jan 2020
@archfz Sorry, missed this.
What am I looking for here? I don't experience any layout changes.
When you click on the character in the top right, it moves to the left when the menu item opens and then moves back to the right when the menu item closes.
WholemealDrop
on 8 Jan 2020
Could you open a new issue? It seems something new.
oliviertassinari
on 8 Jan 2020
@archfz Ok, it's a conflict with the tooltip. Let's ignore it.
oliviertassinari
on 11 Jan 2020
@oliviertassinari Well we should not ignore it cause it's a real issue. React-admin uses material UI and it actually is an issue out of the box. I have created an issue here https://github.com/mui-org/material-ui/issues/19203
archfz
on 12 Jan 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! :-)
samheyman
on 1 Mar 2020
I have problem with background color of toolbar when I open menu, and scrollbar become invisible
here is example:
https://codesandbox.io/s/material-demo-nj80l
know somebody how it fix?
Risbot
on 9 Mar 2020
just add the following css
body { padding-right: 0px !important; }
sandunr
on 11 Apr 2020
hello, in my app i use this solution.
I add disableScrollLock={true} disablePortal={true} id="custom" on my component <Menu> and in my css
#custom {
.MuiPopover-paper,
.MuiPopover-paper {
max-height: inherit !important;
}
}
this work perfectly in my case. I hope this tricks can help.
Vincent-Alibert
on 22 Apr 2020
I experienced the same problems working with Dialogs. The following is the only solution that I have tried that both removes the shifting of content and still locks the scroll of the underlying page/removes its scrollbar.
Solution:
Go to the outermost container div or any outermost div (any container that encapsulates your entire app) in your app and set its width to this:
width: calc(100vw - 1px);
1px can be substituted with 34px or any other low value. This will make it so that opening a Dialog will hide the scroll bar of the underlying page, if present, and will not create any sort of shift in the position of the content. Scrolling is still locked for the underlying page and scrolling is still possible for your dialog.
fastlogin
on 18 May 2020
disableScrollLock={ true }
You are just brilliant, Thank you
cy-sachin-m
on 25 Aug 2020
Related issues
zabojad
路
3Comments
iamzhouyi
路
3Comments
chris-hinds
路
3Comments
activatedgeek
路
3Comments
ericraffin
路
3Comments
Most helpful comment
The way I fixed it was just add
disableScrollLock={ true }in my component :)