« Back to Posts

Fixing Overly Long Select Menus

Jul 15, 2011

If you've ever tried to style an HTML select tag, you know how hard it is to do. While you can, with some work, customize the select itself, the options inside of it aren't style-able. And the options define the width of the select by default.

If you’ve ever tried to style an HTML <select> tag, you know how hard it is to do. While you can, with some work, customize the <select> itself, the <option>s inside of it aren’t style-able. And the <option>s define the width of the select by default.

This means that if you have a very long option, then your <select> may end up wider than its container. A Google search about this problem generally yields a few solutions:

  • Don’t use selects
  • Shorten your options
  • Use the CSS width attribute

Unfortunately, none of these really work. <select> is often the correct tag to use, sometimes you can’t shorten the options, and while setting the width does work, it also sets the width of the <option>s, making it so you can’t see the full text on the overly long ones.

There are some complicated solutions out there, such as this, but they often involve manipulating form elements, never a good idea where accessibility is concerned.

After a good bit of searching, I found this solution from Doug Boude, which is fairly ingenious. It sets the width attribute on a <select> to 100% of its container, thus limiting its size. But, when the <select> is opened, it sets the width to “auto” so that the options show full width. When you close the <select> it goes back to 100%. Brilliant!

I’ve updated it a bit to bring it in to a jQuery world. Below is all that you need. Put the CSS in your style sheet and the JavaScript on your page or in your main script file.

A few things to note:

  • You only need to do this in Internet Explorer, as other browsers always show the full width <option>s. The script accounts for this.
  • Because we bind to the blur and change events to reset the width, if you open a select but close it without changing anything, you lose the drop down arrow until you click away. I find this an acceptable bug, but if anyone has any ideas on how to fix it, let me know.

CSS

1 /* Selects */
2 .constrain {width: 100%; overflow:hidden;}
3 .constrain select {width: 100%;}
4 .constrain.wide {width: auto;}
5 .constrain.wide select {width: auto;}

JavaScript

 1 //Fix problem with select menu options getting cut off
 2 /* Thanks to http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm */
 3 // if the select is too wide, constrain it
 4 jQuery('select').each( function() {
 5 	if (jQuery(this).width() &gt; jQuery(this).parent().width() &amp;&amp; !jQuery(this).parent().hasClass('constrain')) jQuery(this).wrap(&quot;&lt;div class='constrain'&gt;&quot;);
 6 });
 7 // only for IE help out by changing the widths
 8 if (jQuery.browser.msie) {
 9 	jQuery('.constrain select').unbind().bind(&quot;mousedown keydown&quot;,function() {
10 		jQuery(this).parent().addClass('wide');
11 	}).bind(&quot;blur change&quot;,function() {
12 		jQuery(this).parent().removeClass('wide');
13 	});
14 }