Dealing with fixed sized dropdown lists in Internet Explorer

I’ve been wanting to blog about this subject for a while; but I did not have any place to actually blog about it until now. This is going to be the first technical article on this site and I want to start with this because it has been one of the most annoying things I’ve had to deal when it comes to cross-browser compatibility issues.

What are we dealing with?

We are dealing with the way Internet Explorer (prior to IE9) render dropdown lists that have a specified fixed width. Basically, if you specify a fixed width on a dropdown (<select> tag in HTML), but the content is actually wider than the specified width; the content will just get cut off in Internet Explorer.

Here is an example of what such a situation looks like in browsers like Firefox or Chrome:
A fixed sized dropdown list with very long content in Firefox or Chrome

Now here is what it looks like in IE6, IE7 or IE8:
A fixed sized dropdown list with very long content under Internet Explorer 6, 7 and 8

Now this is a serious problem because it virtually makes our dropdown list impossible to use. The problem is even more serious because this is the way the dropdown is rendered by the browser and you cannot just fix it with a little bit of CSS or a simple IE hack. This is one of those situations that seems quite unsolvable at first and actually leads you to think of redesigning the user interface to avoid using dropdown lists.

Well then, why not just change the design?

Redesigning is fine if you are dealing with a personal website, or if you’re in a situation where you actually have enough flexibility for such a thing. Unfortunately, in most cases, you cannot afford it.

I’ve had to deal with this myself in a professional context, so let me picture the situation for you. I was working on a challenging ASP.NET & SharePoint intranet business application for a very big client. The design called for several pages with filter options and search capability, using dynamically filled combo boxes based on administrator user input. After 7 months of development and testing, we fire the user acceptance phase – this is where the client gets to try the application on a testing environment using their own data.

Fast forward two months later. A new bug report comes in, filed under minor / UI glitches: “content gets cut off in all filter dropdowns”.  I investigate the problem and this is where I realize that the client’s actual data being used in those filtering lists is way too large for these dropdowns, and indeed, Internet Explorer just cuts everything in half.
We’re now pretty much 10 or 12 months after the original design was finalized and validated by the client. Calling for a redesign would require a makeover of several central pages of the application, costing us a lot of time, money and client satisfaction. The client obviously wants this bug fixed, and I cannot tell him to go talk about it with Microsoft because there’s nothing I can do.

So here I was left with 2 solutions: designing a custom JavaScript/CSS dropdown list (or using somebody else’s) which would take a considerable amount of refactoring; or finding a fast and usable workaround.

How do we fix this? [tutorial]

I am not the first web developer to run into this problem, and other people before me have solved this in more or less satisfactory ways. I did find a couple web pages trying to solve this problem such as http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie or http://www.icant.co.uk/forreview/tamingselect/. However, I haven’t found anything that actually makes the dropdown act under IE exactly as it does in other browsers (as in keeping the actual select box to a fixed width and only expanding the content), and IE6 compatibility wasn’t covered either (which I did need at the time).
So let’s look at how we can fix this in an easy to implement way that covers (I think) every case and should work in any setting, with full browser compatibility all the way down to IE6.

Let’s start with a simple enough HTML file (the one I used for the above screenshots), which you can download or view right here. We have a nice blue box containing 3 dropdowns displaying some of my favorite books. Since I want to fit all 3 lists + their 3 labels on the same line, I have forced the lists to have a 120px width. Here’s the very standard HTML markup used for those dropdowns:

So we are now going to want to perform 2 actions to make these lists act exactly as they should be acting in IE:

  • Wrap each dropdown within another DOM element (I chose the <span> element which is one of the simplest elements available). This is to be able to conserve the size of the actual base box of the dropdown when we’ll be making it bigger to show the contents.
  • Include some JavaScript startup code (using jQuery in this case to make things easier) to add resizing behavior to all our dropdown lists

Wrapping the dropdown list elements

As you have guessed by now, we will be making the entire contents of the lists visible by dynamically increasing the size of the <select> elements using JavaScript. However, if we enlarge a dropdown, it will make the actual base box larger and will push everything else horizontally – which is not how dropdowns behave in Firefox for instance. Only the expanded “overlay” content is made larger, but the base box keeps its fixed width at all times.
The closest we can get to this in IE is by wrapping the <select> box in another element (we’ll use <span>) and making sure that anything horizontally bigger than our <span> element will remain hidden. We’ll want to give a unique CSS class to this <span> element so we can give it the necessary CSS properties but so we can also easily access those elements with jQuery.

Here’s the new markup we want to use:

 

As you can see, we simply wrap the <select> element with a <span> element, giving both of them the same fixed width (it’s important that they both have the same fixed size to get the most accurate visual effect in the end).

And here’s the required CSS code for the “combobox” class:

We’re adding 2 things to our wrapping elements here: a display property and an overflow property. Using the inline-block is the best way we have to ensure that our element will act as a block element but without breaking the horizontal flow (a regular <select> tag does not break the horizontal flow, so we don’t want our improved dropdown to do so either). The block property of the element will also insure that we can handle overflow which in this case we want hidden. This way, anything going horizontally out of the box will not be shown.

Adding the dynamic behavior

Now that the markup and CSS part is done, we do need to include some JavaScript startup code in order to add the proper resizing behavior to our dropdowns. Very simply, the script will map the following functions to mouse and keyboard events on all of the dropdown elements present on the page:

  • An Expand function which will widen the dropdown when the contents are being expanded
  • A Collapse function which will restore the dropdown to its original fixed size when the content are being collapsed

Here is the complete startup script we will use. This script makes use of the jQuery library; the latest version can be downloaded right here and must be included somewhere within the page. If you’re reading this and haven’t heard of jQuery yet, please beg forgiveness to whichever god you worship because you, sir, are in line for some good old fashion smiting.

I have included lots of comments in the code, so it should be self-explanatory:

Putting it all together

And that’s it. Put it all together on a page and you have dropdown lists behaving on IE6, 7 and 8 the same way they behave in all other modern browsers.

This is what it now looks like in Internet Explorer:
Fixed sized dropdown list in IE6, IE7 and IE8 with the fix applied

Here is a link to the HTML page I linked earlier, but with the markup and javascript modifications included so you can try out the result directly from this site. And of course, you can also follow this other link for a zipped package including both HTML files and the latest jQuery library: LongCombobox_IEFix_Sample.zip.

Going further with our dropdown list

When you work on a big project and come up with such a fix for such a basic element, we want to try and package it so it can be easily used by other developers on the team and avoid if possible having to add the markup and scripts manually whenever it’s needed.
So I don’t know about the Java and PHP people out there, but if any ASP.NET developers are reading this, I obviously urge you to package all this into a single Custom Control and simply replace all your <asp:DropDownList> controls with this new little toy.

Oh wait, you don’t even have to do bother because I have done it for you! Just download the following zip package: RichDropDownListControl_Solution_Sample.zip. The package contains a Visual Studio 2010 solution with a custom control library project that has a RichDropDownList control which already carries this fix. The rendering of the control takes care of the additional markup, and the project DLL output carries the JavaScript code and the jQuery library as embedded resources. Basically you may just use the DLL as an out of the box library.
The solution also includes a sample website demonstrating the use of the RichDropDownList control.

Enjoy.

This entry was posted in Work and tagged , , , , , , . Bookmark the permalink.

9 Responses to Dealing with fixed sized dropdown lists in Internet Explorer

  1. Michel says:

    [...] in Internet Explorer.

    Tu veux faire fuir tout le monde toi en fait.

  2. Adrien says:

    Super, je cherchais justement une solution propre à ce problème, et je n’aimais pas les solutions proposées par ces mêmes liens que tu as suivi :p

    Rien à voir, la nouvelle carte des diablotins : http://www.diablotins-suresnes.com/menu/carte_fr.php

  3. PAul says:

    Thanks, this is by far the best solution I have found.

  4. clint says:

    This is awesome work and worked like a charm for issue I was having with IE8–the corporate standard for us unfortunately. Thank you for taking the time to research this and publish this beautiful solution!

  5. Pingback: Dropdownlist width in IE | t1u

  6. Manikandan says:

    Hey Aerendel ,

    Thanks this solved my problem :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>