Make Multiple Select Control Height Fit Its Contents

You can make a “multiple” select control height fit its contents using different methods. Why would you like to do that? May be you want your users to see all their options without scrolling and the sight of the scroll-bar on select control annoys you (as it does annoy me 🙂 ).

Anyways, here are the ways to make select control height fit its contents:

1- Using jQuery

Put the script below towards the end of your HTML code

Here “multiSelect_id” is the id of your select control. With this piece of script you wait for the page to load (to make sure your select control is there when the script runs), then set the “size” attribute of your control to the number of options in it.

2- Using “size” attribute

If you know the number of options in your select control and it is not subject to change (at least not frequently) you can use the “size” attribute to directly set the size of your select control like so:

Edit: To get rid of the scroll-bar on your select control add “overflow:hidden;” to the style attribute.

Hope this helps.
Good Luck,

Leave a Reply

Your email address will not be published. Required fields are marked *