Julian Jelfs’ Blog

Shrinking select lists in IE – jQuery.append bug?

Posted in jQuery by julianjelfs on March 27, 2009

I encountered a problem recently where I noticed that select lists with width set to 100% were mysteriously shrinking on me and I could only resolve the issue by setting a pixel width. This was a serious inconvenience since I have a fluid layout which is more or less ruined if I am forced to use fixed pixel widths. I found that others had noticed this issue here and here but there was no solution.

I set up a test with the following markup:

<div style=”width:300px”>

<select id=”shrinky” style=”width:100%”>

<option>One</option>

<option>Two</option>

<option>Three</option>

<option>Four</option>

<option>Five</option>

</select>

</div>


I also found, on closer examination that this seems to be a problem with using jQuery append in IE as demonstrated by the following test:

tf.AddTest(“Shrinking select list – demonstrates jquery bug”, function(test){

test.Expects(1);

var sel = $j(“#shrinky”);

var width = sel.width();

sel.append(“<option>test</option>”);

test.NotEqual(width, sel.width());

});

To show that this appears to be a problem with jQuery we can achieve the same thing manipulating the DOM manually and show that the select lists width does not change. This is demonstrated by a second test (notice the assertion at the end is flipped showing that the width is unchanged this time):

tf.AddTest(“Shrinking select list – native”, function(test){

test.Expects(1);

var sel = $j(“#shrinky”);

var width = sel.width();

var optn = document.createElement(“OPTION”);

optn.text = “test”;

sel[0].options.add(optn);

test.Equal(width, sel.width());

});

This alternative approach “solves” the problem for me in that I can still have 100% width select lists so my layout is not ruined. If I get the chance I am going to look into the way jQuery.append works to see if there is any obvious way to patch it so this alternative approach can become unnecessary.

Advertisements
Tagged with: ,

4 Responses

Subscribe to comments with RSS.

  1. James Dunmore said, on August 26, 2009 at 11:02 am

    Same problem here. Your method/fix works a treat. Did you ever find out if there was an obvious/reported bug in JQuery.

    Many thanks,
    James.

    • julianjelfs said, on August 26, 2009 at 11:50 am

      I did have a quick look and it seems that jquery is handling DOM manipulation in a generic way as you would expect so there doesn’t seem to be anything different about select lists. I’m guessing maybe it is just an IE bug – I can’t remember whether I ever checked whether it happens on Firefox. I’m just sticking with the work around for now.

      • James Dunmore said, on August 26, 2009 at 1:07 pm

        Doesn’t happen on Firefox – just an IE problem. At a stab in the dark, I would guess IE bug, but a “fix/workaround” needs to be applie in JQuery; but also happy with the work around !

  2. lankymart said, on April 17, 2012 at 11:19 am

    Anyone find out why this happens? It appears to be linked to the IE Rendering, when the window is forcibly resized the select boxes jump back to 100% of there container width. Using IE 9.


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: