In my current project, I am utilizing Material-UI version 3.1.2 to create the interface.
Previously, when I was using Bootstrap4, I included
style="overflow-y: scroll; height: 100%"head tag to ensure a scrollbar is always present, preventing the application from moving erratically when the page content exceeded the screen size.
However, with Material-UI, this overflow setting seems to cause issues when interacting with popup components such as poppers and menus.
Taking guidance from the FAQ, it mentions a known problem along with a solution: https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened-
Yet, I am uncertain about the instructions provided regarding "apply a global class."
"Apply a global .mui-fixed class name ... to handle those elements."
Should I add mui-fixed to all components within my app? Or specifically to the anchor of the menu/popper? Alternatively, should I apply it at a higher level in the React page component hierarchy?
As a temporary fix, I have removed the overflow styling from my html element.
Despite the issue with content shifting with changes in size, it appears less disruptive compared to when I utilized Bootstrap.
Experimenting further, I attempted adding the mui-fixed class to my body element:
<body style="overflow-y: scroll; height: 100%" class="mui-fixed">
This approach ensures a disabled scrollbar on shorter pages while enabling it as the content grows.
During display of the menu popup, Material-UI alters the style to:
<body style="overflow: hidden; height: 100%; padding-right: 17px;" class="mui-fixed">
Resulting in a seamless appearance regardless of content length. However, upon dismissal of the menu, Material-UI modifies the body element to:
<body style="height: 100%; padding-right: 0px;" class="mui-fixed">
The scrollbar is then removed if the content does not exceed the window size, causing the content to shift abruptly to compensate for the missing scrollbar.