Drop-down list

Question

I had a problem when the dropdown in IE 6/7 behaves like this:

You can see that the width drop-down is not wide enough to display all text without expanding the general drop-down list.

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

We looked at various ways to use onfocus, onblur, onchange, keyboard and mouse events to solve the problem, but still some problems.

I was wondering if anyone would solve this problem 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. This is a bit of a hack and depends on how your user interface is configured, but this is an option. Hope this helps.

change

The link I started looking for was actually the one Tim suggested the same. I think this is a better solution than my original find. 2nd editing . This solution actually depends on the YUI structure, but I would not think that replicating the main idea is that it is too complex. Otherwise, the 1st link is also in order, and much easier.

Good luck.

Answer 2

Could there be something like this in your situation?

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

The width of the drop-down list grows / contracts during the mouse.

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 that what you want to do is possible without a lot of work or using the framework. Above is something for you to think about trying / messing with ...

Answer 4

I would recommend making the choice wider. Firefox is friendly about this and expands the width of the parameter so that you can see its value, but this does not solve the problem, which, once you have selected the option, you will not be able to see exactly what you have chosen as a user, unless you make more choices wide. Therefore, from the point of view of user convenience, I would advise simply allowing the browser to resize based on its contents or to set a width wide enough for the value of the widest content of the options.

Answer 5

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 vs2005 web application. A control is added and elements are placed. It is adjusted to the longest element, i.e. 7.0 When I indicated the width, this was no longer done.

[EDIT 2] The only problem is that the text box of the popup menu is also customizable. This may knock down your user interface. So this may not be the solution you are looking for.

[EDIT 3] This is definitely another way that they do. I think the only way to overcome this is to create your own control similar to what was suggested here.

Answer 6

The problem is that we do not want it to change automatically, allowing us to isolate the problem to this particular problem. Although I agree that it is not ideal in terms of usability, I would still like to solve this problem.

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

Answer 7

I tested this on IE7 and it expands accordingly. Are you sure you are not using some kind of weird CSS that makes it only be that size in IE 6/7? (You can target specific browsers using weird CSS selectors like "* html")

Answer 8

Basically, if you really need the ACTUAL text box, you will need to select one or the other (specify or not define the width). This is a classic example of coding complexity for all known browsers, and there really is no way around this until the companies get together and say, “it will be so. FOREVER”.

Alternatively, you can use a home-made solution, as indicated in another answer. In your case, I would recommend it.

Answer 9

How do you populate DropDownList. I use the following code to populate a DropDownList and adjust the width to fit 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 as das d asd as da sf gfa sda sd asdasd a")); ddl1.DataSource = list; ddl1.DataTextField = "Text"; ddl1.DataBind(); } 

Oh yes, I don't explicitly define the width in the DropDownList.