When putting together a Web based form space can be at a premium. Select lists are typically auto-adjusted by your browser to be the length of the longest option in the list.
But that just doesn’t work when space is tight and in many of my forms one doesn’t want the select list to automatically size itself to a length beyond what has been allocated for it, especially if the options are dynamically coming from a database.
To handle this gracefully for all browsers is actually not quite as simple as it seems and requires a bit of JavaScript to work universally.
But first a bit of background information
The standard HTML <input type=”select” element is known as a select list or as a drop-down list and looks like the example at the start of this article.
The major difference between the select list shown in the image at the start of this article compared to a default select list is that the example here shows the select list with a default maximum width, but with the options longer when the list is expanded.
In most browsers (especially older browser versions) a regular select list will not look like this. The length of the options found in the regular select list will determine the width of the list on the Web page.
Testing of the Expanded Options List
In some browsers that I have tested such as IE9, Chrome 16+, or Firefox 10+ you can simply set the css width attribute to a set length and when the user clicks on the list, the browser will be smart enough to show the options in an expanded form.
In older browsers such as IE8 or earlier, setting the css width property will also limit the width of the options shown when the list is expanded. This looks terrible and is quite undesirable when designing a Web UI.
How to Extend the Expanded Options List
So how to create a limited-length select list that expands regardless of the browser being used?
The best way I have found is to embed the select list as an absolutely positioned element within a relatively positioned element. The relatively positioned element can really be anything. In the example code below I use a <td table cell tag to relatively position the select list.
Once you have the positioning elements in place, you can add the JavaScript onMouseOver and onMouseOut event handlers to collapse and expand the select list as well as to resize the width.
Expanding the select list automatically is handled by the code: this.size=this.options.length
Likewise contracting the select list automatically can be done with the command: this.size=1
The JavaScript syntax to set the width of the select list is done using the command: this.style.width=
I find this code especially handy when working with linked select lists that are populated from a database via AJAX UpdatePanels.
As you can see in the example code below, I have added code to the onMouseOver width extending function that checks for the number of options in the select list. If the list has only the default first option, then the width will not expand since there is no data in the select list.
Below is an example of a static HTML page and select list that will auto-expand and will resize the options shown when the list is expanded.
<html> <head></head> <body> <Table style="border:1px solid black; background-color:#d3d3d3"> <tr><td> Example of a lengthening select list </td></tr> </table> <br> <table> <tr> <td style="max-width:250px;position:relative;"> <select name="ddlTestSelect" id="ddlTestSelect" onmouseover="this.size=this.options.length;if(this.options.length>1)this.style.width='470px';" onmouseout="this.size=1;this.style.width='200px';" style="width:200px;position:absolute;"> <option selected="selected" value="0">---</option> <option>option 1 here is some sample text for this option</option> <option>option 2</option> <option>option 3 here is some sample text for this option and some more</option> <option>option 4</option> <option>option 5 here is some sample text for this option</option> <option>option 6</option> <option>option 7 here is some sample text for this option</option> <option>option 8</option> <option>option 9 here is some sample text for this option</option> <option>option 10</option> <option>option 11 here is some sample text for this option</option> <option>option 12</option> <option>option 13</option> <option>option 14 here is some sample text for this option</option> <option>option 15</option> </select> </td> </tr></table> </body> </html>
Justin Cooney 