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.

The sipler, the better: http://stackoverflow.com/a/8788381/2375207 just use size attribute — nicolallias, Aug 25 '14 at 11:25
Another usful link (you should hang on sometimes there) http://www.w3schools.com/tags/att_select_size.asp — nicolallias, Aug 25 '14 at 11:27
if you want to restrict the number of elements in the select, you may play around with css. Or js by removing the nth-child >6 — nicolallias, Aug 25 '14 at 11:29
@nicolallias, The 'size' attribute applies to the standard html select. However the jQuery selectmenu implementation ignores the attribute' — Jon Evans, Aug 25 '14 at 12:45

Anand M Arora · Answer 1 · 2018-07-13T12:52:50.517

12

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.

edited Jul 13 '18 at 12:52

answered Jul 03 '15 at 14:08

Anand M Arora

372
3
8

for my case ```.ui-selectmenu-menu-dropdown { height: auto !important; }``` suited me – shareef Jan 05 '23 at 11:12

score 10 · Answer 2 · edited May 05 '15 at 09:10

10

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

edited May 05 '15 at 09:10

Aletheios

3,960
2
33
46

answered Dec 13 '14 at 19:06

Eugene Snihovsky

470
7
15

score 0 · Answer 3 · answered Aug 25 '14 at 11:42

0

Here you are: limiting a list to a certain number of element in jquery

http://jsfiddle.net/8dgc6jrr/

var LIMIT = 4; // limit to the fourth element
$("option").each(function( index, object ) {
    if(index+1>LIMIT){
        object.remove();
    }
});

answered Aug 25 '14 at 11:42

nicolallias

1,055
2
22
51

Re-reading my post I think I have phrased it wrongly, D'oh. I mean I want to keep all the items in the dropdown, ony show a subset of them that the user can scroll thorugh. – Jon Evans Aug 25 '14 at 12:47
Ooooh indeed, I suppose you have to play around vith css :/ – nicolallias Aug 27 '14 at 13:12

Strabek · Answer 4 · 2015-09-17T08:48:13.330

0

In my case I added css code for each menu I wanted height to be changed:

CSS:
#yourMenuID-menu {
  max-height: 300px;
}

HTML:
<select id="yourMenuID" size="6" class="form-control">
  <option value="" selected>All</option>
</select>

"-menu" is added by jQuery UI to each menu (select tag in my case).

edited Sep 17 '15 at 08:48

answered Sep 17 '15 at 08:01

Strabek

2,391
3
32
39

jQuery selectmenu dropdown height

4 Answers4