Tuesday, June 23, 2009

IE 6.0 Drop downs - a Quick and Dirty Fix

If anyone has an easy, elegant solution for the IE 6 dropdown bug, let me know. I know there are custom controls, etc, but I've been searching for something generic that can be applied to hundreds of pages without rework.

What I came up with is not pretty, but gets the job done. Basically, IE 6 drop downs are pretty much "stuck in their ways" and only size to fit the width. That means if you have items that are wider than the given width, you're out of luck for reading or seeing what they are (other browsers are kind enough to expand the drop down when you click on it to accommodate the width of the largest item).

What I did was put a global script that checks if we're in bad territory (IE 6) and then goes through all of the drop downs and appends an anchor tag with a question mark, so you get something that looks like this:

?

The code:

function IE6_DropdownFix() {
    var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
    if (badBrowser) {
        $("select").each(function(){
     $(this).after("?");
        });        
    }
} 

Then, when you click the tag, you get the contents of the dropdown. This is done by finding out who it was inserted after, then iterating the sub-options and putting them into an alert box:

function IE6_ShowContents(elem) {
 var dropdown = $(elem).prev();
 var text = ''; 
 $(dropdown).find("option").each(function(){
  text = text + $(this).text() + "\r\n";
 });
 alert(text);
}

Again, not the prettiest of fixes but at least it gets the job done ... interested in any other solutions you might have!

Jeremy Likness