jQuery selectmenu dropdown height

Question

I want to limit the number of items in a dropdown list, lets say to 6. After quite a search I can't find anything other than a hint there is a maxHeight option, but that appears to have no effect.

HTML:

<label for="files">Select a file:</label>
<select name="files" id="files">
</select>

Javascript:

// configure
$( "#files" ).selectmenu({
              icons: { button: "ui-icon-search" } ,
              style: 'dropdown',
              maxHeight: 60
           });
// Test data
for( i = 0; i < 100; i++ )
{
   $('#files').append($('<option/>', { 
        value: "a" + i,
        text : "b" + i
    }));
}

TTFN, Jon

[Edit] Just to clarify, I want to keep all the items in the droplist, only display a subset of them that the user scrolls through like a combobox in a normal deskop application.

Answer 1

You can also extend the CSS class of ".ui-selectmenu-menu .ui-menu" like this:

.ui-selectmenu-menu .ui-menu {max-height: 200px;}

Note: Add this code in separate css file other than the downloaded css library of jqueryUI.

Answer 2

First you need to include menuWidget method. And then add class with limited height value. JS code

$( "#files" )
  .selectmenu()
  .selectmenu("menuWidget")
  .addClass("overflow");

and CSS

.overflow { height: 200px; }