jquery ui selectmenu scrollbar not working

javascript jquery jquery-ui jquery-plugins select-menu
jyriand picture jyriand · Jul 16, 2012 · Viewed 8.7k times · Source

I use jquery selectmenu plugin. I have initialized select with 

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

I have many options and this causes to appear default browser scrollbar, but i cant use it. If I click and try to drag this bar, selectmenu closes. I can scroll with mouse wheel. There might be some conflict in css and various plugins. But im not sure where to start looking.

Any ideas, what might be causing this problem?

Answer

Christopher King picture Christopher King · Nov 18, 2014

You can set the max-height for the content of the selectmenu when it is opened in CSS and then it will present a scrollbar within the list of items that can be used.

ul.ui-menu { max-height: 420px !important; }

You might need to further restrict this style-change in your CSS if you are using other jQuery UI widgets that include a <ul> element with the class 'ui-menu' assigned.

Related questions

jQuery tooltip add line break

So, I want to take the content of a div in which I have several <br/>, and then pass it as a title attribute using jQuery tooltip widget. I want the lines to appear one beneath the other …

Read More
How to prevent scrolling on prepend?

I'm prepending content to the top of the body. Sometimes this content can be 400-500px tall, and when something like this gets added, pushing the content down when you are reading the page it can be really annoying. I …

Read More
How to decide between _init and _create in jQuery UI widget?

I think I understand the difference between _create and _init in widget definitions (see for instance this question), but I'm still not certain about the purpose for the distinction. What sorts of setup tasks go in _create() or in _init()? …

Read More