how to make a drop down menu with a vertical scroll bar?

Question

hi i need to put a vertical scroll bar in the drop down menu such that at first it will appear only size=1 but when we drop down it should have a vertical scroll bar , can anybody help me , i would really appreciate any help

Answer 1

isn't that just an html-dropdownbox that you need?

<select name="cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
   <option value="volkswagen">Volkswagen</option>
   <option value="bmw">Bmw</option>
</select>

Answer 2

If you use the html-dropdownbox, Natrium suggested, you can set the attribute "size" of the select tag, to specify how many lines you want to show. So if - in his example - you set size to 3, you'd have the dropdownbox 3 lines high and a scrollbar attached to scroll down to the remaining 3 items.

If you mean something with CSS, say you display your dropdown-menu in a div-tag, you could use something like that:

<div style="height:200px; overflow-y:scroll">...</div>

This gives you a div with an absolute height. If the content of the div gets too big, a vertical scroll bar is displayed automatically.

Answer 3

If you mean you want to force the scrollbar to be always visible, you just can't do that with the native select drop down. The visibility of the scrollbar in the native control depends on the number of the entries in the drop down and there are also differences between browsers on how they handle the control. For example, IE6 and IE7 seem to show the scrollbar only when the number of items exceeds 30 whereas FF3 and Chrome show the scrollbar when the number of the items exceeds 20.

If you really, really want to always get the scrollbar, you'll have to use some non-native implementation, like the jQuery FlexBox.