How to Fix Dropdown Problems on Internet Explorer

Lately we found ourselves caught in some nasty dropdown problems. Some of our customers who use Internet Explorer were unable to to read their full project and task names on the new timesheet. Apparently it’s a browser bug specific to Microsoft’s Internet Explorer. All you need to do is Google “IE select box problem” and you’ll see the legions of disgruntled developers this control has left in its wake.  What follows is a recounting of our experience and our solution.

The Problem

Before the timesheet redesign, we did not specify a width on the Project and Task dropdowns.  For some users with really long project/task names, this meant their select boxes would extend past the right edge of their browser window.

The logical fix is to constrain the width of these select boxes. Well-behaved browsers have no problem with this approach. Internet Explorer, however, interprets a width on the select tag very literally.  The select box and all of the options are limited to the specified width, regardless of whether this truncates 90% of the option text.  For our users with long project/task names, this made the dropdown practically useless.

ie_select

The Solution

As with many of IE’s problems,  there are several workarounds out there, and unfortunately none of them are perfect.  We looked at three common approaches for solving this problem before we settled on the one we’re using now.

  1. Dynamically re-size the dropdown on mouseover.  The main problem with this approach is that (like anything triggered on mouse-over) the user experience can be very disruptive and seem “jumpy”.
  2. Custom select box, made from unordered lists and complex event handling.  Scott Darby’s stylish-select plugin for jQuery is a great example of this.  We gave this one a shot, but the custom select box does not retain browser’s default behavior with select, such as tabbing and using key stroke to jump to a certain selection.
  3. What ended up saving the day was this idea from Doug Boude.  It is surprisingly simple: re-size the select box on click, and set overflow: hidden on a containing div.  The hidden overflow will prevent the select from interfering with other controls to the right, while still allowing the full options to be displayed below.

Doug’s original solution required you to know the full width of your select box. Ours would need to compute this dynamically, so we wrote a simple Prototype.js class to encapsulate the event handling and to calculate the width of the select box.  You can check out a demo of the solution with code and some notes on how to use it for your problematic select boxes.  Disclaimer: this solution works best in IE7 and IE8. We do not recommend using it in IE6.

Hope you find this useful!

10 Comments so far
  • I love to see a company like yours share some of its learnings to help the greater community. Of course, because I’m a Web developer, I particularly like tips like this IE one, but in general, regardless of the topic, the more who share, the more who benefit. So thanks.

  • You have customers who use IE? I would just laugh at them. “HA HA HA! Hey Jim! This guy is using Internet Exploder!”

  • Very helpful post

  • ddwfwef wef wefwe fwefwefwe f

  • The above problem have been fixed in IE9 Beta but now because of the fix the dropdown container clashes with explorer window.

    want a fix for this….

  • Another problem is accessibility. You may want to try changing it to onfocus instead of onmousedown.

  • Ruchi Sinha July 22, 2011

    I was facing the same problem and didn’t find any perfect solution on google.. so, i solved it on my own way…Check this out http://dropdownwidthproblem.blogspot.com/2011/07/i-was-on-google-round-clock-for.html

  • But which is not working for ASP.Net dropdownlist control….in HTML dropdown working fine… any other way to achieve that….

  • i think it is help u…but not 100%????

    Ramesh

    –select–
    this is not a look like dropdown list but it works like that
    if u had better answer send me rameshgoll@gmail.com
    dont wast the time it like a river flow dnt staps*****
    don’t miss u r friends, don’t wast the money!!!!!!!!!!!!!!!!!!

  • sorry i am tryed post code, but it is not showing on screen,it is write by my own if u want contact with my mail glaramesh@gmail.com

Comments have been closed.
The HARVEST Blog News & small business tips from your beloved time tracking & invoicing app.