Spacing issues with fixed elements when used while having a open dialog

[thupi]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Their should be a method to compensate for the dialogs bahavior when it opens. The dialog remove the scroll bar when it opens. When the site contains fixed elements that causes the element to move slightly.

Current Behavior

I was not able to find a method to solve this issue with the current possibilities.

One way to solve the problem is to stop the removal of the scrollbar. This approach requires a way to diable the compensation in element like the AppBar etc.

The other method could be some kind of Component og props that allows the fixed element to compensate in the same way as the AppBar.

Steps to Reproduce (for bugs)

1. Go to https://codesandbox.io/s/znwvvwq404
2. Observe the face icon and the "right" text in the red box.
3. Click the "Open Dialog" button
4. Observe the position of the face icon and the "right" text in the red box.

Context

I tried to have fixed tabs right below the AppBar. In order to do that i wrapped the tabs in a div and fixed it. After that i used flexbox to center the Tabs.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.16
React	15.6.1
browser	Google Chrome Version 61.0.3163.100

[oliviertassinari]

I have noticed two issue.

1. With the AppBar

I think that we should be adding the following style to MuiAppBar.root.

box-sizing: border-box; // Prevent padding issue with the dialog and fixed positioned app-bar

2. With the fixed positioned element

You should be adding the .mui-fixed class name to this element.

With those two fixes, we are all good.

[toolaugh]

@oliviertassinari I have added classname 'mui-fixed' into the element I want to fixed but The text still not fixed.
Whether is it Correct ?

[toolaugh]

It happens when I have the scroll page...

[oliviertassinari]

@toolaugh The mui-fixed class name was designed as a beacon for fixed positioned elements. If your element isn't fixed, it's pointless.

[toolaugh]

@oliviertassinari I have a page with header is fixed position and the body is not. it can scroll.
When I Open menu in header. The body had a padding right so that It changes .. . How can I fixed body position or How to prevent it changing ? IN this case.

[badawiM]

+1

[badawiM]

@toolaugh if you dont mind having the scroll bar visible all the time, try add the following to ur css
body {
overflow-y: scroll !important;
}
which will overwrite overflow : hidden added by material-ui.

[oliviertassinari]

A new reproduction example would help us digging in the issue.

[badawiM]

@oliviertassinari the issue simply comes from the fact the menus, popover, select and dialogs add overflow: hidden and padding-right: 17 to ur page, so all different compoments move to the right, unless the component is fixed and has mui-fixed classname, I manage to fix the problem by removing mui-fixed from my fixed components and to the body overflow-y: scroll to the body of the page, however it is not an elegant solution.

I dont see why you chose to have popovers, select and menus with overflow hidden, ideally in any page opening any of those should not touch the scroll bar.

A good example, in my project I have many components with popovers ( anchororigin.vertical: bottom) if I open the popover near the bottom of the screen most of the content is not visible because of the overflow: hidden

[gregnb]

I'm in the processing of converting a very old/large codebase and there was some legacy CSS lingering around of the following:

body ::-webkit-scrollbar{width:12px;}

Something that stupid gave me the same side effects you describe above with shifting content. Maybe this helps someone in the future, maybe not. Solved my problems for Popover, though!

[Mangatt]

I believe that there is connected issue - when page does not have scrollbar and dialog is opened, following style is added to body:

overflow: hidden; 
padding-right: 33px;

Which causes pages jump left by 33px.

[acmoune]

@toolaugh if you dont mind having the scroll bar visible all the time, try add the following to ur css
body {
overflow-y: scroll !important;
}
which will overwrite overflow : hidden added by material-ui.

even overflow: auto !important; is OK

[kardahim]

October 2022. Problem still exist. A temporary solution may be:

body {
    padding-right: 0 !important;
}