Drop Down List Issue

Question

I’m having an issue where a drop down list in IE 6/7 is behaving as such:

You can see that the drop down width is not wide enough to display the whole text without expanding the overall drop down list.

However in Firefox, there is no issue as it expands the width accordingly. This is the behaviour we want in IE 6/7:

We’ve looked at various ways to utilize the onfocus, onblur, onchange, keyboard and mouse events to attempt to solve the problem but still some issues.

I was wondering if anyone has solved this issue in IE 6/7 without using any toolkits/frameworks (YUI, Ext-JS, jQuery, etc…).

Answer 1

<script type="text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

I don't think what you want to do is possible without a lot of work or using a framework. Above is something for you to consider trying/messing with...

Answer 2

I tested this on IE7 and it expands accordingly. Are you sure you're not using some kind of weird CSS that forces it to be that size only in IE 6/7? (It is possible to target specific browsers using weird CSS selector hacks such as '* html')

Answer 3

Basically, if you really do need an ACTUAL textbox, you will need to choose one or the other (define or not define the width). This is a classic example of the difficulties in coding for all known browsers being used, and there is really no way around it until companies come together and say "this is the way it's going to be. FOREVER".

As an alternative, you could use a home-grown solution as mentioned in another reply. In your case, I would recommend it.

Answer 4

Would something like this be doable in your situation?

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

The width of the dropdown grows/shrinks during a mouseover.

Answer 5

I would recommend making the select wider. Firefox is friendly about it and expands the width of the option so that you can see its value, but that doesn't solve the problem that once you've selected an option, you won't be able to see exactly what you selected as a user unless you make the select wider. So from a user-friendliness viewpoint, I would advise just allowing the browser to size the select based on its contents, or set a width that is wide enough for the value of the widest option's contents.

Answer 6

The problem, is we do not want it to resize automatically, let's isolate the issue to this specific problem. While I agree that from a usability standpoint it is not ideal, I still would like to solve this problem.

We have a fixed width drop down list, and we want to have it behave as in FireFox 7 as displayed above.