Grow your CSS skills. Land your dream job.

Select Cuts Off Options In IE (Fix)

Published by Chris Coyier

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.

What I Did

I decided the best way to handle it is to keep the static width on the select element by default, but when moused over in IE, change the width to "auto" to accommodate. And then of course put it back to static width when the user is "done". Here that is using jQuery:

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

In plain English:

  1. Remember the original width of the select.
  2. When mouse cursor goes over select element set the width to auto so it expands as needed.
  3. When the field is changed or leaves focus, set width back to original width.

Of course, only IE 8 and lower need this (bug was fixed in IE 9), so I apply the script via IE conditional comments.

<!--[if lt IE 9]>
<script>
   // the fix
</script>
<![endif]-->

View Demo   Download Files

Project on GitHub

Update August 2012: There is another dedicated project to this fix called IE 8 Expand Select Width on GitHub.

Comments

  1. Permalink to comment#

    Nice! Ive always had this issue on our ecommerce site, Im gna give this a try!

  2. Permalink to comment#

    Nice job. Love the touch of jQuery to make it work.

  3. Permalink to comment#

    Will this still work if a user is navigating with their keyboard? Seems like the use of .mouseover would limit this to just mouse users?

  4. Nice work, but unfortunately this is not accessible since it requires JS. To my understanding there is no “real” accessible fix for this or am I wrong?

  5. Permalink to comment#

    Great little trick. I have had this problem in the past, and now I know how to fix it!

    -Brenelz

  6. Permalink to comment#

    Yes! I’ve had this happen to me a bunch of times and it’s super annoying, but I never had the patience to actually work out a fix, haha.

    One question – when you set the width of the select to auto on mouseover, that makes the entire box and dropdown wider, right? So wouldn’t that push nearby elements around and potentially mess up your page?

    • I agree. This could be a problem for IE layouts. My thought is maybe the element could be “floated” in some way… like temporarily hovered (with position absolute/relative) and some underneath element to help keep the original size reserved, that way it could “grow” and overlay anything around it when focused, but would not affect (other than to cover up) any content around it when doing so (much in the same vein as the drop-down part itself already does).

  7. Permalink to comment#

    Ahh a great fix indeed :) I shall note this one down lol

  8. Ooble
    Permalink to comment#

    Why not use the min-width attribute of CSS instead of the width attribute? Seems like it’d accomplish the same thing, except it’ll work on IE with JavaScript turned off too.

  9. Great fix indeed!

  10. Ulrike
    Permalink to comment#

    glad you found a fix, and thanks for sharing it. This bug is so annoying, I am surprised it doesn’t get more attention.

    I saw your post on twitter and wanted to point you to the hedgerwow site, but than you had a solution before I found the bookmark… did you try it with really long options though? It was flickering a lot on my quick test (might be another reason for that, haven’t had the time to thorougly test yet).

    You write

    Of course, only IE 7 and lower need this

    Unfortunately this is still in IE8, isn’t it?
    How frustrating…

    • Fitz
      Permalink to comment#

      As of IE8 RC1 the select issues has been fixed and works the same as all those good browsers.

  11. Good fix. I am gonna try to re-write this in mooTools and send over the code to you.

  12. jack.feefofe
    Permalink to comment#

    This kind of thing makes me mad. I am tired of having to provide hacky JavaScript fixes or conditional style sheets just for IE! But a very nice article, Chris!

  13. Permalink to comment#

    Hey

    just a suggestion, you could implement jQuery’s ‘hover’ here.. It takes a mouseover as first function arguement and mouseout as second.

  14. bart
    Permalink to comment#

    it doesn’t really work for me. Select does resize on mouse over and out but when I try to select an option I lose the whole thing (it looks like it does not believe mouse is still over the select), anyone knows what am I doing wrong or maybe someone has similar problem?

  15. querybot
    Permalink to comment#

    unless im doing something wrong, everytime the mouseover event is fired i get this error in firebug

    $(this).data(“origWidth”, $(this).css(“width”)).css is not a function

    any ideas

  16. Permalink to comment#

    thanks!

  17. Permalink to comment#

    Better yet: Chris, can you post a demo please?

    Thanks.

  18. Joe
    Permalink to comment#

    is that possible to resize just the List and no the select just like Firefox when we open the select ?

  19. Permalink to comment#

    Just to say thank you so much for this fix. It was the only one that worked after hours on Google.

  20. Luciano
    Permalink to comment#

    Thank you for this post!! It was very helpful
    To be sure all page is loaded (all selects), independently from where you put the JS code, you can add:

    $(window).load(function() {
          // this post code
    });
    
  21. Javier
    Permalink to comment#

    Hi,
    Excelent solution, is very fast. But i have a problem with tab index, when the user hit tab over the cloned control, the next control do not get the control. ┬┐any ideas how to solve it?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".