jquery ui selectmenu scrollbar not working

Question

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?

your selector should be `$('select')` -- missing quotation mark — nbrooks, Jul 16 '12 at 09:04
its not the cause of the problem, just poor copying abilities from my part :) — jyriand, Jul 16 '12 at 10:06

score 13 · Answer 1 · answered Nov 18 '14 at 16:09

13

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.

answered Nov 18 '14 at 16:09

Christopher King

1,691
23
28

I am using JQuery 1.11.3 and this solution has worked for me! I also had to initialize as the question puts it: `$('select').selectmenu({width:100, maxHeight:420, style: 'dropdown'});` – dr_rk Aug 23 '15 at 08:59

score 4 · Answer 2 · answered Oct 27 '15 at 14:30

4

A solution is given for the example "select a number" of the JQueryUI demo page:

$('select').selectmenu().selectmenu("menuWidget").css("height","200px");

answered Oct 27 '15 at 14:30

julien

898
3
17
32

alesnav · Accepted Answer · 2013-10-16T19:55:25.093

It seems to be a problem in this section of the js file:

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

The scrollbar agrees the condition in "if" clause, so selectmenu is closed...

You can comment the line inside "if" clause until someone gives a solution for this bug. This way, the selectmenu won't be closed when you click out of it, but it will be closed when you select any option...

EDIT:

Ok, it's working now. Change the section shown before by this one:

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

This way, as the scrollbar is part of the div with class "ui-selectmenu-menu-dropdown"... selectmenu won't be closed when moving the scrollbar.

this file is not available for me in my project, but still I am getting this error. how to resolve this issue. using jquery.mobile-1.4.2.js , jquery 2.1.0 — shyam.y, Mar 06 '18 at 08:31

score 0 · Answer 4 · answered May 28 '15 at 07:51

if you want to set max height for each item by ID. Use:

#select1-menu { max-height: 150px !important; }
#select2-menu { max-height: 200px !important; }

For example, your selectmenu's id is 'select' use:

#select-menu { max-height: 150px !important; }

score 0 · Answer 5 · answered Jul 03 '19 at 07:30

<!--JQUERY-->
$('.custom-combobox-toggle').on('click',function (e) {
      e.preventDefault();
      $('.ui-menu').addClass('custom-scroll');
});

<!--CSS-->
.ui-widget.ui-widget-content.custom-scroll {
    max-height: 300px;
    overflow: auto;
    display: block;
}

jquery ui selectmenu scrollbar not working

5 Answers5

Linked