ASP.NET Dropdownlist itemslist width issue in Internet Explorer

I need to somehow modify the ASP.NET dropdownlist control to have an auto-width on the items list. The dropdownlist control in itself has a fixed width and that cannot be changed.

I have tried several ways already to no avail, see http://forums.asp.net/t/1648469.aspx

Some of you have decided to solve this issue by building a custom dropdown control, but this is not really an option in my case.

Before answering, please check the thread in the above link to make sur开发者_开发技巧e I haven´t been through it already.

There is no way to get the exact behavior your describe out of the standard DDL control. The best bet would be to put a blank DDL on the page with a listbox hidden directly underneath. With JavaScript make the listbox appear and disappear onlick. You'll get selection and the width of the DDL won't change, but the listbox width can be dynamic.

The better option would be to use a third party control set like Telerik or ComponentOne that has this functionality already built into their control set. The above suggestion assumes you have to use built-in controls.

In trolling the internet I found that many have asked your question and all received the same answers as you have. They eventually accepted the cold hard truth as you will soon have to as well.

In IE, the options (drop list) section of the drop-down list is the same size as the, for lack of better terms, select portion (drop box). You will either need to resize the entire control, as this post details, or build a custom HTML control. I will most definitely be the first to admit it in the event I am wrong (along with many others that provided the same solution), but hope seems faint.

The custom control would not be TOO extremely difficult. Off the top of my head, maybe a "selector" div, and hidden ol, some mouseover / mouseout event handlers, and an ASP.NET repeater to populate the list items. I won't go into the details of implementing this custom control, because there are many ways you can do it. As Josh stated, Telerik and ComponentOne have already implemented such a control, but of course for a price. If you would like, I would be willing to hack together some code for you.

This should solve it, you could make any changes in the styling and it works perfect, include tags for style and select wherever I missed them:

<style>
.ctrDropDown{
    width:205px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;
    width:250px;

}
.plainDropDown{
    width:205px;
    font-size:11px;
}
</style>

<div style= "width:205px; overflow:hidden;">
select id="Dropdownlist" class="ctrDropDown"  onblur="this.className='ctrDropDown';" onmousedown="this.className='ctrDropDownClick';" onchange="this.className='ctrDropDown';" >