Prevent Select From Running Off Bottom Of Css Dropdown Menu

I've a CSS dropdown menu containing a select box that extends beyond the menu's bottom border when opened. Subsequent clicking on a select option that lies beyond the menu's bottom

Solution 1:

One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.

Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.

With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.

The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.

Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.

Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.

Or you could run some Google searches and find more!

In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.