IE 8 fixed width select issue

html css internet-explorer-8 html-select

25,903

Solution 1

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"));
  });

Solution 2

Fixed it!

Here is the revised jsFiddle: http://jsfiddle.net/PLqzQ/

The trick is adding the focus selector to your CSS so that it looks like this:

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

select:focus { width:auto ;
position:relative ;
}

I tested it in IE8 and it works like a charm.

VERY IMPORTANT: You have to add a Doctype Definition to your Code otherwise the fix won't work for IE8.

Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Solution 3

I found all the other answers to be really flaky and over-complicated. This can be easily accomplished with the following CSS (at least in my case):

html.IE8 .SelectContainer {
    position: relative;
}

html.IE8 .SelectContainer select {
    position: absolute;
    width: auto; /* Or fixed if you want. */
    max-width: 100%;
}

html.IE8 .SelectContainer select:focus {
    max-width: none;
}

I set a class on the html element if the browser is IE8 (or less) (Google how to do this).

Put your select inside a .SelectContainer and when you click it, it will expand as needed.

No need for jQuery, conditional comments, etc. Much simpler and works much smoother, for my needs, at least.

I hope none of you ever have to employee this.

It's time for the US gov't to upgrade to a modern browser!

Solution 4

I had the same problem and also tried mouseenter and mouseleave but I thought it was very clumsy-looking. I checked the event list for select elements (from MSDN) and tried using beforeactivate and deactivate intead. It worked much more smoothly in my opinion. Tested on a page running in IE8 directly (not compatibility mode):

$('select').beforeactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', 'auto');

});

$('select').deactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', '166px');
});

View more solutions

25,903

Author by

Clyde Lobo

Just a normal guy dabbling with code. I work as a Front End JS developer and in my spare time try to help others by answering questions that interest me. #SOreadytohelp

Updated on October 26, 2020

Comments

Clyde Lobo over 3 years

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

Clyde Lobo over 11 years

The width is necessary. Cant specify auto
Web Designer cum Promoter over 11 years

i cannot get result from this can you give a demo on jsfiddle please. thanks
NixRam about 11 years

The behavior is clumsy and not as it behaves in other browsers. The length of the select text shouldn't be widened but the drop down.
Daft almost 10 years

Much better than using JS. Possibly wrap the styles inside
GôTô about 9 years

@NitinRam this is not a very nice solution indeed but at least it works. We are trying to fix a browser issue so lucky we get one already :) I would apply this CSS to ie8 only though