User123 User123 - 4 months ago 39
CSS Question

Select option overlay issue in materialize

I am using materialize for my website, the select option I am using is getting hided by the main div. I have tried with giving position relative but is not working.

Can anyone suggest me how to make the select option appear on top.

Below is the screenshot of how the select option is appearing now.

Image

Answer

This is happening because the main div has overflow: hidden on it, so it is hiding the part of the select menu that extends beyond its borders.

The solution is to remove overflow: hidden.

In certain cases, the overflow setting is necessary for the design and other things might break if you change it. This is unfortunate, and I know of no good way to get the Materialize select to work with this. In my app, I modified the select so that the list of options gets appended to the document body, which means it is always above any other content. This is how, for example, the Angular Material select is implemented.