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

This guy had the same problem as you and he came up with a solution. It is a bit of a hack and depends on how you have your UI setup, but it is an option. I hope it helps.

edit

The link that I started off looking for was actually this one, which is the same one Tim suggested. I think it is a better solution than my original find. 2nd edit This solution is actually dependent on the YUI framework, but I wouldn't imagine replicating the main idea behind it being too hard. Otherwise, the 1st link is alright too, and much simpler.

Good luck.

Answer 2

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 3

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

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 5

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.

Answer 6

I think that if you leave the width blank on the control it will resize to the data in the control.

[EDIT] Yes, tested it in a vs2005 web app. Added the control and put the items in. It adjusted to the longest item in ie 7.0 When I stipulated the width it no longer did this.

[EDIT 2] The only issue is that the textbox of the dropdown also adjusts. This may throw off your UI. So this may not be the solution you are looking for.

[EDIT 3] It is definitely the different way they render. I think the only way you could overcome this is to create your own control similar to what was suggested here

Answer 7

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 8

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 9

How are you populating the DropDownList. I am using the following code to populate the DropDownList and it adjusts the width according to the largest text displayed:

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

Oh yeah don't explicitly define the width on the DropDownList.