Best ways to position a custom dropdown menu?

[FezVrasta]

I’m using one of those plugins that converts a select into some nice dropdown menu with lot of useful features.

The problem is that now I need to use it inside a scrolling modal, and here the problem is that the dropdown gets clipped by the overflow: auto of the container.

My only idea to make the dropdown being excluded by the clipping is to position it with position: fixed and calculate with javascript the top and left position when it’s opened and even when the page is scrolled. But I think it will lead to lags…

Can you find other solutions I could test?
Thanks!

[Paulie_D]

Frankly a scrolling modal sounds like poor UX.

[FezVrasta]

that’s what is defined by Google Material Design.

Dialogs are separate from the underlying parent material and do not scroll with the parent material.

Certain types of dialog content naturally needs to scroll, such as a long list of ringtones. In these cases, make it obvious that content scrolls by displaying scroll bars by default.

[Paulie_D]

Fair enough but it sounds poor too me.

You have select’s scroll bar in the example image…and presumably the user can scroll the modal itself to show more options.

Other than that I can’t think of a fix.

[FezVrasta]

yes this is what I want to avoid…

[Author]

Posts