Height of an HTML select box (dropdown)

Question

Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.

The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.

Cartouche

The drop-down is an application-level control, not a client-level control. (sadly) – Nonet

Answer 1

Confirmed.

The part that drops down is set to either:

1. The height needed to show all entries, or
2. The height needed to show x entries (with scrollbars to see remaining), where x is
   • 20 in Firefox & Chrome
   • 30 in IE 6, 7, 8
   • 16 for Opera 10
   • 14 for Opera 11
   • 22 for Safari 4
   • 18 for Safari 5
   • 11 in IE 5.0, 5.5
3. In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

For (3) above you can see the results in this JSFiddle

Fendig

@Fendig how to set (1) in chrome – Hambley

If you set size="1" or nothing since it is the default then your select will be a drop down vs a static vertical in Page list. However as noted the actual dropdown height is determined by the browser and as developers we have no control over the list height. – Fendig

@Fendig Hats-off for the counts provided :) – Cassis

Answer 2

NO. It's not possible to change height of a select dropdown because that property is browser specific.

However if you want that functionality, then there are many options. You can use bootstrap dropdown-menu and define it's max-height property. Something like this.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

Deville

Answer 3

I know that it's not the best practice for changing the height of the select, but there is a code that maybe helps you to change the height.

Using the size attribute of the select tag:

<select onfocus='this.size=6;' onblur='this.size=6;' onfocusout='this.size=null;' onchange='this.size=6; this.blur();'>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
</select>

Gascony

Answer 4

i have been working on a dropdown replacement jquery plugin to combat this problem. As of this post, it is almost indistinguishable from a native dropdown in terms of look and functionality.

here is a demo (also a link to downloads): http://programmingdrunk.com/current-projects/dropdownReplacement/

here is the project page of the plugin:

http://plugins.jquery.com/project/dropdownreplacement

(update:) the jquery plugin page seems to no longer work. I will probably not put my plugin on their new site when they get it working, so feel free to use the programmingdrunk.com link for demo/download

Cartouche

interesting idea - I certainly like the ability to "skin" the fake select list (I find many default from the "native" OS theme and thus look "odd"), and the ability to control the content in the list I find handy (since IE provides very little styling options for option elements) – Fendig

The last link from this answer is dead ! – Towney

yep, but the demo page is a better resource than the plugin site. it also has a download on it. ill update the answer though, thanks – Cartouche

This looks awesome :D I wonder if you have time to test it with some later version of jquery. Thank you – Ocd

I do not, but if you do, feel free to report back :) - actually I know that it works with 1.8.2 – Cartouche

Answer 5

Actually you kind of can! Don't hassle with javascript... I was just stuck on the same thing for a website I'm making and if you increase the 'font-size' attribute in CSS for the tag then it automatically increases the height as well. Petty but it's something that bothers me a lot ha ha

Pryer

I would assume the goal would be to show more choices in the dropdown box, not to simply take up more space, which is what this answer would do. – Baruch

Answer 6

This is not a perfect solution but it sort of does work.

In the select tag, include the following attributes where 'n' is the number of dropdown rows that would be visible.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

There are three problems with this solution. 1) There is a quick flash of all the elements shown during the first mouse click. 2) The position is set to 'absolute' 3) Even if there are less than 'n' items the dropdown box will still be for the size of 'n' items.

Euhemerus

Good try but no luck, also tried replacing it with onFocus . – Acapulco

Answer 7

The Chi Row answer is a good option for the problem, but I've found an error i the onclick arguments. Instead, would be:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(And mention you must replace the "n" with the number of lines you need)

Beutler

Answer 8

My approach is different: I calculate and set the size of the select to match the available space.

1. I start with a smaller select than the available space I determine the actual height of each option by increasing the size of the select and seeing how its offsetHeight changes; this value is browser dependent
2. I calculate how many more options can fit
3. I increase the size of the select to a value that will make it fit

    // Make the select fit in the div`
    // The looks of a select are set by the browser, not by the client
    // Therefore, they change from browser to browser, and even with various revs of a given browser
    // This cannot be done at init, because the height of each option changes later
    // Instead, it must be done later, after the select has rendered 
    if (!seriesSelect.fitted) { // If we haven't done it yet
        seriesSelect.fitted = true; // Flag it, so we don't do it again
        // Determine the actual height of each option in the select
        var maxHeight = seriesSelect.parentElement.parentElement.offsetHeight;
        var startHeight = seriesListBox.offsetHeight;
        seriesSelect.size = seriesSelect.size +1;
        var endHeight = seriesListBox.offsetHeight;
        var lineHeight = endHeight - startHeight;
        // Calculate how many more options can fit
        var extraHeight = maxHeight - endHeight;
        var extraItems = Math.floor(extraHeight / lineHeight);
        // Set the number of options to the max that will fit
        seriesSelect.size = seriesSelect.size + extraItems;
    }

Triboluminescent