4

I am looking for a way to have a scroll bar in a drop-down list in HTML, such that if the drop-down list contains more than eg. 5 items, a scroll bar will appear for viewing the rest. This is because I will be forced to have some big lists. I have been googleing it for the past hours, but with no luck.

It needs to work for IE8+, FF and Chrome.

My list currently looks like this:

<select name="Select1" size="1">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>

I have tried using the following CSS within a Div, but that made no difference. 

.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}

Changing the "size" gives a big scroll-able table, which is not what I am after.

http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.png is an appropriate image of what I'm after.

I have the possibility to use js, php and jQuery if needed, but the simpler the solution, the better.

//Ambrose

Ambrose
  • 163
  • 1
  • 1
  • 8

3 Answers3

3

You need to give an 'id' to your tag.

it should be like this

HTML 5

 <select name="Select1" size="1" id="ddlCars">
 <option value="">- Please select a name -</option>
 <option value"volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="ford">Ford</option>
 <option value="toyota">Toyota</option>
 <option value="aston">Aston Martin</option>
 <option value="alfa">Alfa Romeo</option>
 </select>

CSS

#ddlCars {
    min-height:190px; 
    overflow-y :auto; 
    overflow-x:hidden; 
    position:absolute;
    width:300px;
    display: contents;
 }
Sion Christian
  • 55
  • 1
  • 12
1

Perhaps I'm missing something but isn't that what the size attribute is for?

JSfiddle

<select name="Select1" size="6">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 3
    No, because, like I said. That is not what I am after. "size" creates one big scroll-able list. I want a drop-down list.. with scroll in the options that drop down. – Ambrose May 28 '14 at 06:17
  • More precisely, the 'size' parameter says how many of the entries to make visible. (So if select has 20 entries, you have want to have just 5 of them visible. As a side-effect, browsers SHOULD then add a scroll bar, but some browsers don't seem to. (Android's Chrome ignores the size, and forces size down to one entry visible.) – David Jul 06 '20 at 15:11
0

You cannot change the built-in behaviour of the SELECT element. You may want to consider a JS-based alternative, such at Twitter Bootstrap.

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • 1
    The comment with http://www.bootply.com/86116 looks appropriate.. but I dont understand how to recreate this. There are a lot of CSS classes missing/that I cant find. Does this actually work in IE8? – Ambrose May 27 '14 at 14:51