I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.

Here is the screenshot of before opening the dropdown,

Here is the screenshot of after opening the dropdown,

I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.

Here is the screenshot of before opening the dropdown,

Here is the screenshot of after opening the dropdown,

• javascript
• html
• css
• reactjs
• material-ui

• I think, it's default behaviour of material ui select component. If you use native, you will get default behaviour of browser. You can try same thing on material-ui.com/api/select – Kishan Mundha Commented Dec 19, 2018 at 8:04
• So, can i achieve that default behaviour, while using mateiral ui select component? @KishanMundha – Vikas Valechha Commented Dec 19, 2018 at 10:55
• @VikasValechha Did you find any solution of the issue? – Jawla Commented Mar 13, 2020 at 6:44
• Also interested if you found the cause of this? – JIbber4568 Commented May 1, 2020 at 13:53

4 Answers 4

A workaround for this issue can be to use the Select component of material-ui and use the 'disableScrollLock: true' property. But in that case, the scroll bar will not disappear on opening select, so the whole page will be scrollable while the select options are open.

<Select
    MenuProps={{
          disableScrollLock: true,
        }}
...
/>

I have a problem using Select component, so The solution using a textField:

 <TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>

You can add class into your header, It'll solve your issue

<header class="mui-fixed"></header>

Answering only if it helps somebody.

By default whenever you open the dropdown using mat <Menu></Menu> it will add overflow: hidden; to the body node. One possible solution is that you add overflow-y: auto !important; on the body element and this also worked for me.

For example:

Here you see I have added overflow-y: auto !important; in my body style

Now here you see mat is automatically assigning overflow: hidden; to my body element. Which I have catered by !important;