I found this question, and while listboxes are cousins of the dropdown box, I think there are unique properties of combo boxes which require a seperate question.

I am working with a javascript replacement for a combo box to allow for better skinnability. Since this is essentially a custom control, I thought I would tweak the height of the dropdown to something optimal as well.

This question on stackoverflow talks about the different rules for different browsers:

(a) the height needed to show all entries, or 
(b) the height needed to show (x) entries (with scrollbars to see remaining) 
     (20 in Firefox & Chrome, 30 in IE6,7,8, 16 for Opera 10, 14 for Opera 11, 
      22 for Safari 4, 18 for Safari 5, 11 in IE5.0,5.5) 
(c) In IE, if there are no options, a stupidly high list 
   of 11 blanks entries. 

And this can be seen in the following screenshots: enter image description here

Another possibility is to set the height of the drop down to span the whole viewport (and add scrollbars as necessary):


download bmml source – Wireframes created with Balsamiq Mockups

Can anyone provide research/evidence/experience as to optimal heights of comboboxes? There seems to be quite a large difference if we look at the rules provided by browser vendors.

  • FYI, if you're not using "Chosen" as a combo-box, you might just look at their standard controls. The GUI on that has been really satisfying for our designers and developers. It's on github.
    – Taj Moore
    Commented May 11, 2012 at 14:54

7 Answers 7


Dropdown is notoriously difficult to re-create. There are many good reasons to use browser's dropdown as is, and the below screenshots demonstrate one of them: depending on positioning of the dropdown, size and position browser window, the browser can display the dropdown outside its chrome to maximize usability. You can never do this with a javascript dropdown.

There are other pitfalls as well... such as the development time needed for building keyboard support, etc. This alone is not trivial.

I've been down this road before, so I just wanted folks to be aware not-so-obvious benefits of browser dropdown.

But to answer your question, 16-18 is a good number if you're building a normal-size javascript dropdown. Any more than that, and you risk running into double-scroll or cropped menu situation, which javascript dropdowns are often ill-equipped to deal with.

enter image description here

enter image description here


There is no standard among browsers regarding the default size of a combo-box because there is no standard at all.

I know your question is not an alternative, but we should consider this Jackob Nilsen's quote:

(...) regular drop-down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember. (Source)

The link above talk about the use of a Mega Dropdown Menu rather a combo, an interesting read about how to provide better ways, since regular Combo-boxes annoy users.

The ideal size depends of how easy users can absorve everything at a glance, and as a personal oppinion, the size should be confortable as a paragraph size, from 5 to 15 lines, since we are used with this ammount of vertical scanning.


There is not formula for that, however:


I think its a good idea to use a searchable Dropdown list in order to give flexibility to the user where he can just start typing to have his choice shortlisted or just use the regular drop down.

A simple jQuery function for ComboBox should help you active this.

That said, the drop down should not occupy more than 1/3rd space above the fold.


Why not leave it with default height?

  1. Every particular user is used to work with combo as it usually appear on every single site. When you alter this behavior, some users won’t notice, while others may find this uncomfortable. BTW will it be suitable for displaying on mobile phones?

  2. Do not place too many items in combo (personally I never place more than 100) so combo will be comfortable to scroll and search through. If you have to display a lot of items in combo, most probably there is something wrong with this control. In your case: if there are a lot of items in combo, its not a control's problem, it's a developer's problem.

In my app, I have a combo to select street of a city (while entering address) If there are less than 100 items, they appear as a combo, otherwise as a textbox with autocomplete.


I prefer editable dropbox when I understand the user knows the list they are selecting from. Like the example of countries, I prefer to start typing and the closest match will show in dropdown.

As for the height of dropdown, I prefer it to be 10-15 items in the list and more than that will make it difficult to scan and concentrate.

  • Be careful with leaving answers on this site stating 'I prefer' because it comes across as you leaving your subjective opinion. ux.stackexchange isn't for individual preferences, but for expert opinions based in genuine research and experience. If you state that you personally prefer something then those are not appropriate answers. However if you expand on this by stating 'in my experience users prefer that...' these are more appropriate answers.
    – JonW
    Commented May 11, 2012 at 10:43
  • Thanks Jon! Will keep this in mind. It was really helpful since I am new to Stackexchange
    – ajayashish
    Commented May 14, 2012 at 4:15

In this case I suggest to code own combo with sections support and split countries to continents or something. Do not use combo for large number of items, because there is no optimal height for that.

  • BTW Current solution in most sites on the web for selecting country is to split it to two step at least. Maybe having two combos: one for continents and one for countries is right solution?
    – kbec
    Commented May 12, 2012 at 0:17
  • I don't know that I've ever seen that approach; most everytime I need to select "New Zealand" from a list, it's from a single enormously tall combobox.
    – Bevan
    Commented May 12, 2012 at 3:23
  • @Bevan: Visit hp us home and try to change country/language. You can see this approach. Of course it's using no combos, but idea is the same.
    – kbec
    Commented May 12, 2012 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.