DropDownList width in Internet Explorer

Question

I have an ASP.NET DropDownList with a rather wide content, while the closed list's width has to be quite small due to room limitations on the site. That's why I need to be able to set a specific width to the list when it's closed, but want it to be as wide as the content when it's opened.

By default, Firefox automatically makes DropDownLists as wide as its content when opened. Internet Explorer on the other hand does not.

Is there any way to tell IE to make the opened DDL as wide as the content when it's opened, but have it in a smaller size when closed? Preferably without using javascript.

EDIT: Ok, I wasn't clear enough in my first post. The emphasis is on when opened. I want a specific width on the list when it's closed, but I want it to be as wide as the content when opened. As I said, Firefox does this, IE does not.

Answer 1

IE will by default make it as wide as the content. This behaviour is changed if you specify a width on the DDL or constrain the DDL by putting a width somewhere in the parent container.

Answer 2

I would say your best bet is figure out the max width, and set it on the dropdown. That way you get a consistent look no matter what the contents, and you also bypass this issue.

Answer 3

IE default to as wide as content.

Set a CSSClass and give it a specified width and you will be able to change it.

You can also go

select{
  width:42px;
}

edit: from what you're saying now, I feel like you need to do some javascript, because IE will not handle that. Try looking into jquery

Answer 4

I'd recommend not using the drop down list, but a more javascript friendly one like this

http://jquery.sanchezsalvador.com/samples/example.htm

This will allow your content to expand past the selects width.