jquery ui selectmenu barra de desplazamiento no funciona

Question

Utilizo el plugin jquery selectmenu. He inicializado seleccione con

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

Tengo muchas opciones y esto hace que aparezca la barra de desplazamiento predeterminada del navegador, pero no puedo usarlo. Si hago clic e intento arrastrar esta barra, el menú de selección se cierra. Puedo desplazarme con la rueda del mouse. Puede haber algún conflicto en css y varios complementos. Pero no estoy seguro de por dónde empezar a buscar.

¿Alguna idea, qué podría estar causando este problema?

Answer 1

parece ser un problema en esta sección del archivo JS:

// 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); 
    } 
}); 

La barra de desplazamiento está de acuerdo la condición en la cláusula "si", por lo que se cierra ... Seleccione Menú

Puede comentar la línea dentro de la cláusula "si" hasta que alguien dé una solución para este error. De esta manera, el Seleccione Menú no se cerrará cuando se hace clic fuera de él, pero se cerrará cuando selecciona una opción ...

EDIT:

Ok, está funcionando ahora. Cambiar la sección mostrada antes por éste:

$(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); 
    } 
}); 

De esta manera, como la barra de desplazamiento es parte de la div con la clase "ui-Seleccione Menú-menú desplegable" Seleccione Menú ... no se cerrará cuando se mueve el barra de desplazamiento.

Answer 2

Puede establecer la altura máxima para el contenido del menú de selección cuando se abre en CSS y luego presentará una barra de desplazamiento dentro de la lista de elementos que se pueden usar.

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

Es posible que necesite restringir aún más este estilo de cambio en su CSS si está utilizando otros widgets jQuery UI que incluyen un elemento de > < ul con la clase 'ui-menú' asignado.

Answer 3

si desea establecer la altura máxima para cada elemento por ID. Uso:

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

Por ejemplo, la identificación de su Seleccione Menú es 'seleccionar' uso:

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

Answer 4

Se da una solución para el ejemplo "seleccionar un número" de la JQueryUI demo page:

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