드롭 다운 목록 문제

Question

IE 6/7의 드롭 다운 목록이 다음과 같이 작동하는 문제가 있습니다.

드롭 다운 너비가 전체 드롭 다운 목록을 확장하지 않고 전체 텍스트를 표시하기에 충분히 넓지 않다는 것을 알 수 있습니다.

그러나 Firefox에서는 그에 따라 너비를 확장하므로 문제가 없습니다. 이것은 우리가 6/7에서 원하는 행동입니다.

우리는 Onfocus, Onblur, Onchange, 키보드 및 마우스 이벤트를 사용하여 문제를 해결하려고 시도하지만 여전히 문제를 해결하는 다양한 방법을 살펴 보았습니다.

툴킷/프레임 워크 (yui, ext-JS, jQuery 등)를 사용하지 않고 IE 6/7 에서이 문제를 해결했는지 궁금합니다.

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.