scrollable select consistent accross browsers?

Question

I need to create a dropdown, which can contain 100s of options.

I need a scrollbar to appear and be consistent across all browsers.

Google came up empty: Is there a good URL that describes if this is consistent or not?

Thanks.

Answer 1

I would strongly recommend against having a scrollable select with 100s of options for usability reasons.

With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.

The UI design reasoning is that it requires:

• Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)

• Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) - see Jacob Nielsen's and others' usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.

• Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.

Here is a set of bad examples

[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].

A proper UI solution is to have a select whose contents are dynamically populated based on a search field - either typed text (think Google's new search box, or browser's address bar) or sometimes checkboxes/radio buttons.

BTW, sub-menu solutions also suck for mouse navigation - minor twitch of the wrist and you lost all of the pointing work.

I apologize that this answer is not an answer to "how do you solve my technical problem", but I am of a very strong opinin that you're solving the wrong problem in the first place.

HTH.

Answer 2

The short answer is no, for the standard HTML select element and the requirements you describe.

However, do you know you can set the size attribute for how many rows are visible at one time? AFAIK this will force scrolling in all browsers, but it isn't a drop down. Like this:

<select size="10">
  <option>etc</option>
  ...
</select>

There is also the possiblity of optgroup to split the options into categories.

If you have many categories you could do what I did on one site and use this jQuery click menu, using the click function to set a hidden field. So now I have a dropdown with sub-categories and it's quite easy to find the right option.