CODEWITHSUNDEEP
htmlinternet-explorerhtml-select
Shyju
Shyju

Reputation: 218762

HTML Select options width is cropped in IE. Any solutions?

In Mozilla and non-IE browsers, if the option of select list is of a greater length than the select's width, it will show up. But in IE, it will crop the option up to the select's width.

Is there any way to make IE's select behaviour to be like that of non-IE browsers?

Upvotes: 7

Views: 31435

Answers (11)

Stud Muffler
Stud Muffler

Reputation: 1

The best solution described here: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

Upvotes: 0

bkuo
bkuo

Reputation: 11

I placed in a table cell, just trying to keep the same width with the cell.

$("#id" ).width($("#id" ).parent().width());

btw, thanks for all the posts, it helps me a lot.

Upvotes: 1

Damien Goor
Damien Goor

Reputation: 299

I have select's in table cells and the following code did the trick for me:

.myClass{
   width: 100%;//most of browsers
   _width: auto;//ie6 hack
}

Cheers

Upvotes: 0

keong
keong

Reputation: 11

for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

I used this way to showed the drop down list when the width is not showed correctly.

It work for IE6, Firefox and Chrome.

Upvotes: 0

peter
peter

Reputation: 29

This seems to work well in forcing IE to reevaluate the select width. Works in IE7 and IE8.

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}

Upvotes: 2

Simon Dyson
Simon Dyson

Reputation: 645

I like 26design's solution but it has 2 flaws:

  1. Under some circumstances it is possible to fire the mouseover event twice resulting in the origWidth variable getting set to "auto" preventing the select ever reverting to original size.

  2. If the text values in the drop down do not need extra space then the select actually shrinks which looks odd.

This version fixes both of these issues: 

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(this)
        .mousedown(function(){
            if($(this).css("width") != "auto") {
                var width = $(this).width();
                $(this).data("origWidth", $(this).css("width"))
                       .css("width", "auto");
                /* if the width is now less than before then undo */
                if($(this).width() < width) {
                    $(this).css("width", $(this).data("origWidth"));
                }
            }
        })
        /* Handle blur if the user does not change the value */
        .blur(function(){
            $(this).css("width", $(this).data("origWidth"));

        })
        /* Handle change of the user does change the value */
        .change(function(){
            $(this).css("width", $(this).data("origWidth"));

        });
    });
}

Tested in IE6-8

Upvotes: 1

simoncoggins
simoncoggins

Reputation: 398

Here's another approach that worked for me:

<style>
select.limited-width {
    width: 200px;
    position: static;
}

select.expanded-width {
    width: auto;
    position: absolute;
}
</style>

<select class="limited-width" 
        onMouseDown="if(document.all) this.className='expanded-width';"
        onBlur="if(document.all) this.className='limited-width';"
        onChange="if(document.all) this.className='limited-width';">

    <option>A normal option</option>
    <option>A really long option which messes everything up</option>
</select>

By switching to position:absolute you remove the element from the page flow, which helps if you find your select box moving when you expand it.

I've chosen to rely on sniffing document.all as a check for IE as it keeps it compact and avoids the need for a separate function. If that doesn't work for you, define a function within IE conditional comments and call that instead.

One small bug, if you select the same element it won't shrink again until you move the focus to another element, I'm calling it a feature ;-)

Upvotes: 0

26design
26design

Reputation: 91

I have a solution that works for me, so I figured I'd go ahead and post it (with some caveats at the bottom). It's not the most efficient use of jQuery, I'm sure, but it's working how I want it to work. Basically, I have a list of timezones that are (obviously) rather long text strings.

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

Description:

  • Conditionally set for IE browsers only.
  • This solution is a modified version of a script provided by Chris Coyier (http://css-tricks.com/select-cuts-off-options-in-ie-fix/).
  • Also, this solution assumes that you, like me, don't really care about IE6 so much. The basic functionality is there, so IE6 browsers can still see most of the select options, submit the form, etc., but I can't waste any more time trying to appease this small subgroup.

Caveats:

  • The select list has a fixed width before it's focused.
  • Onmouseout, the list has to be blurred or changed before the size is set back to the original fixed width. The reason I made sure the select list was blurred or changed first, is because previously, onmouseout would fire off as soon as your mouse left the select box (meaning you could try and select an option, but they would disappear before you could click one).
  • Conversely, on mouseover the focus is set to make sure the blur event is fired properly.

Upvotes: 0

Martha
Martha

Reputation: 3854

The absolute easiest way to make sure select lists are always exactly as wide as they need to be is to allow the browser to set their width, i.e. don't set a width yourself. This "method" (really a non-method, as it involves not doing something) will work on every browser ever made, even IE6.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382746

OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.

<script type="text/javascript">
  window.onload = function()
  {
    var elem = document.getElementById('test');
    var values = elem.length;
    var biggest_value = 0;
    var biggest_option = '';

    for(var i = 0; i <= values; i++)
    {
      if (elem.options[i])
      {
        var len = elem.options[i].value.length;
      }

      if (biggest_value < len)
      {
        biggest_value = len;
        biggest_option = elem.options[i];
      }
    }

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';

};
</script>

The Select Box:

<select id="test">
 <option value="Hello">Hello</option>
 <option value="Hello Again">Hello Again</option>
 <option value="Hello Yet Again">Hello Yet Again</option>
</select>

Upvotes: 0

Steve Mallory
Steve Mallory

Reputation: 4283

css:

.set_width { width:120px; }

html:

<select class="set_width"><option>one</option><option>two</option></select>

Upvotes: 1

Related Questions