CODEWITHSUNDEEP
htmlcsslistscrollbar
Ambrose
Ambrose

Reputation: 163

Have a scroll bar in drop down list HTML

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

Upvotes: 4

Views: 62615

Answers (3)

Sion Christian
Sion Christian

Reputation: 65

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;
 }

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115025

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>

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

Upvotes: 0

Related Questions