Klesic Klesic - 1 month ago 8
CSS Question

How to set a max height and allow scrolling with jQueryUI Selectmenu

I'm trying to use the new jQueryUI selectmenu widget to get custom styling for my

dropdown and retain full functionality. But it appears to be practically useless for large lists. In its default state when opened, the dropdown items just keep running off the page and there is no scrolling enabled. I find this to be bizarre for a plugin which can supposedly replace the standard HTML
dropdown menu.

Is there a way to fix this e.g. set a max height on the dropdown items that are shown and enable scrolling? Maybe I missed an API option. I suppose it could be done with some creative CSS?

Here is a JS Fiddle showing what happens.


There sure is a way of doing that, and fortunately, it's incredibly simple! :)

You simply need to define a max-height for the <ul>:

#countries-menu {
    max-height: 100px;

Note that the max-height could instead be applied to .ui-selectmenu-menu .ui-menu if you'd like to adjust any select menu in jQuery UI.

Updated fiddle: https://jsfiddle.net/mjfnao1L/1/

Hope this helps :)