Clyde Lobo Clyde Lobo - 1 month ago 8
CSS Question

IE 8 fixed width select issue

I have to specify a width to the

select
in my html.

It works fine in all browsers except in IE8, which cuts the text that is more than the width

CSS

select {
border: 1px solid #65A6BA;
font-size: 11px;
margin-left: 22px;
width: 166px;
}


HTML

<select>
<option value="1">Some text</option>
<option value="2">Text Larger Than the Width of select</option>
<option value="3">Some text</option>
<option value="4">Some text</option>
<option value="5">Some text</option>
</select>


DEMO

I am open to js, jquery solutions, but would prefer a css only solution

Answer

The page in question was a very old page and it forces IE 8 to go into compatibility mode, so the css solution did not work.

I ended fixing it using the following piece of jquery

Assume the select has a class of fixedWidth

$el = $("select.fixedWidth");
$el.data("origWidth", $el.outerWidth()) 

$el.mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });
Comments