CODEWITHSUNDEEP
htmlcssinternet-explorer-8html-select
Clyde Lobo
Clyde Lobo

Reputation: 9174

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

Upvotes: 3

Views: 25934

Answers (7)

Clyde Lobo
Clyde Lobo

Reputation: 9174

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

Upvotes: 1

Bharath Raj
Bharath Raj

Reputation: 31

follow the link it may help.

<script>
  $(document).ready(function() {
    $('select').change(function(){
      $("#width_tmp").html($('select option:selected').text());
      $(this).width($("#width_tmp").width()+30); // 30 : the size of the down arrow of the select box 
    });
  });
</script>

Upvotes: 0

Josh M.
Josh M.

Reputation: 27831

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!

Upvotes: 2

Cynthia
Cynthia

Reputation: 5403

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">

Upvotes: 10

Nupur
Nupur

Reputation: 616

This was a handy plugin i stumbled upon while sorting IE8 issues. Do have a look, IE8 EXPAND SELECT WIDTH. Works amazing. Easy plug-n-play.

Upvotes: 0

mckrex
mckrex

Reputation: 45

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

Upvotes: 1

ram
ram

Reputation: 253

I think you should change the width attribute setting: instead of fixed 168px use width:auto; Should work perfectly.

Upvotes: -4

Related Questions