Home > General Software Development > QuickTip Fix your IE7 Select Lists

QuickTip Fix your IE7 Select Lists

December 7th 2010 | Jimmy Bosse

Fixing the Display of Variable Width Select Lists in IE7

I recently helped a client with an ASP.NET website that targeted the IE7 browser. We weren’t doing anything specific that required IE7, but we knew that 99% of the users would be using IE7 as this was the standard installation for the internal users who would be given access to the system.

Several of the pages had select lists in the header of tables that would act as column filters. Unfortunately, IE7 has an incredibly annoying method of rendering select lists. It will shrink the input so that it is contained with its parent element, but when you click the pull-down to expand the selection list, the list does not expand to the width of the select list item. In our case, with narrow columns this resulted in some select lists where the user could only see the first few letters of each option, which is obviously useless.

Searching the internet I found a solution and a commenter to that solution that used a jQuery script to modify the css to force the inout to expand and contract as needed when you interact with the control. The script posted had a few kinks that had to be ironed out but I managed to get it working perfectly for IE7 and IE8. Once I got it working, I decided to turn the script into a jQuery plugin, and got that working as well.

Now we have a nice plugin that we can easily use in any page that has a select list that needs to be fixed.

In order to fix your select lists you need to only perform two steps:

1. Include jQuery, and the plugin:

<script type="text/javascript" src="<your=path-here>/jquery-1.4.3.min.js"></script>

<script type="text/javascript" src="<your=path-here>/fixieselects.js"></script>

2. Add call to the plugin with the relevant select lists on jquery ready event:

$(document).ready(function () {

$(".mycssclass select").fixieselects();

}

Requirements:

jQuery 1.4.3 can be downloaded here.

My fix script sample can be downloaded from here.

Jimmy Bosse is a Senior .NET developer and Team Lead at Thycotic Software, an agile software services and product development company based in Washington DC. Secret Server is our flagship password management software product.

  1. Raji
    June 6, 2011 at 12:18 pm

    good article. it worked

  1. December 13, 2010 at 4:25 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: