Dropdownlist width in IE

Question

In IE, the dropdown-list takes the same width as the dropbox (i hope i am making sense) whereas in Firefox the dropdown-list's width varies according to the content.

This basically means that i have to make sure that the dropbox has to be wide enough to display the longest selection possible. this makes my page look very ugly :(

Is there any workaround for this problem? How can i uses CSS to set different widths for dropbox and the dropdownlist?

Answer 1

You can add a style directly to the select element:

<select name="foo" style="width: 200px">

So this select item will be 200 pixels wide.

Alternatively you can apply a class or id to the element and reference it in a stylesheet

Answer 2

So far there isn't one. Don't know about IE8 but it cannot be done in IE6 & IE7, unless you implement your own dropdown list functionality with javascript. There are examples how to do it on the web, though I don't see much benefit in duplicating existing functionality.

Answer 3

There is no way to do it in IE6/IE7/IE8. The control is drawn by the app and IE simply doesn't draw it that way. Your best bet is to implement your own drop-down via simple HTML/CSS/JavaScript if it's that important to have the the drop-down one width and the list another width.

Answer 4

Creating your own drop down list is more of a pain than it's worth. You can use some javascript to make the IE drop down work.

Check out this solution here: http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js

It uses a bit of the YUI library and a special extension for fixing IE select boxes.

You will need to include the following and wrap your elements in a

Put these before the body tag of your page:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Post acceptance edit:

You can also do this without the YUI library and Hack control. All you really need to do is put an onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (or whatever you want) on the select element. The YUI control gives it that nice animation but it's not necessary. This task can also be accomplished with jquery and other libraries (although, I haven't found explicit documentation for this)

-- amendment to the edit: IE has a problem with the onmouseout for select controls (it doesn't consider mouseover on options being a mouseover on the select). This makes using a mouseout very tricky. The first solution is the best I've found so far.

Answer 5

Hi, on mouseover, the select gets wider.I don't need that. How could i remove this behaviour . I only need for the options to get wider, after I click on the select

Answer 6

We have the same thing on an asp:dropdownlist:

In Firefox(3.0.5) the dropdown is the width of the longest item in the dropdown, which is like 600 pixels wide or something like that.

Answer 7

Thanks that's exactly what I was looking for...as long as this doesnt screw your layout when the dropdown go wider, this solution is ideal...well ideal for IE!

Answer 8

In jQuery this works fairly well. Assume the dropdown has id="dropdown".

$(document).ready(function(){

$("#dropdown").mousedown(function(){
 if($.browser.msie) {
  $(this).css("width","auto");
 }
});
$("#dropdown").change(function(){
 if ($.browser.msie) {
  $(this).css("width","175px");
 }
});

});

Answer 9

@Thad you need to add a blur event handler as well

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

However, this will still expand the selectbox on click, instead of just the elements. (and it seems to fail in IE6, but works perfectly in Chrome and IE7)

Answer 10

I used the following solution and it seems to work well in most situations.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

---

Note: the $.browser.msie does require jquery.

Answer 11

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

Answer 12

if you want a simple dropdown &/or flyout menu with no transition effects just use CSS... you can force IE6 to support :hover on all element using an .htc file (css3hover?) with behavior (IE6 only property) defined in the conditionally attached CSS file.

Answer 13

Also this might help, helped me: http://support.microsoft.com/kb/254614

Answer 14

Here's another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:

if ($.browser.msie) $('select.wide')
    .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
    .bind('click', function() { $(this).toggleClass('clicked'); })
    .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
    .bind('blur', function() { $(this).removeClass('expand clicked'); });

Use it in combination with this piece of CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

All you need to do is to add the class wide to the dropdown element(s) in question.

<select class="wide">
    ...
</select>

Here is a live example. Hope this helps.

Answer 15

I've found the link to the javascript on google and I made a post on pastebin of any one who need it =)

http://pastebin.com/WWS84QZi

Answer 16

you could just try the following...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

I tired and works for me. Nothing else is required.

Answer 17

check this out.. it's not perfect but it works and it's for IE only and doesn't affect FF. I used the regular javascript for onmousedown to establish IE only fix.. but the msie from jquery could be used as well in the onmousedown.. the main idea is the "onchange" and on blur to have the select box return to normal... decide you're own width for those. I needed 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"

Answer 18

The hedgerwow link (the YUI animation work-around) in the first best answer is broken, I guess the domain got expired. I copied the code before it got expired, so you can find it here (owner of code can let me know if I am breaching any copyrights by uploading it again)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

On the same blog post I wrote about making an exact same SELECT element like the normal one using YUI Button menu. Have a look and let me know if that is of any help!

Answer 19

This seems to work with IE6 and doesn't appear to break others. The other nice thing is that it changes the menu automatically as soon as you change your drop down selection.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});

Answer 20

BalusC's answer above works great, but there is a small fix I would add if the content of your dropdown has a smaller width than what you define in your CSS select.expand, add this to the mouseover bind:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})

Answer 21

If you use jQuery then try out this IE select width plugin:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Applying this plugin makes the select box in Internet Explorer appear to work as it would work in Firefox, Opera etc by allowing the option elements to open at full width without loosing the look and style of the fixed width. It also adds support for padding and borders on the select box in Internet Explorer 6 and 7.