2

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 sure I haven´t been through it already.

Dave Chen
  • 10,887
  • 8
  • 39
  • 67
Peter
  • 21
  • 1
  • 2

3 Answers3

0

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.

Josh
  • 1,724
  • 13
  • 15
  • Thanks for your answer! Yes, it seems like the best option would be to acquire a third party component such as the Telerik or ComponentOne options unless I can easily tweak the standard DDL control. Thanks for your input! – Peter Feb 07 '11 at 07:16
0

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.

Community
  • 1
  • 1
regex
  • 3,585
  • 5
  • 31
  • 41
  • Thanks for your answer! Yeah, as per Joshs suggestion the third party components are the easiest ones, but I am willing to give the manual workaround a go provided I can make it mimic the behaviour I need. – Peter Feb 07 '11 at 07:22
0

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';" >
Stephan
  • 41,764
  • 65
  • 238
  • 329
Sunny
  • 1
  • 1
  • there is also a javascript solution for this, let me know if u need it, i could send u the lnk – Sunny Mar 31 '11 at 20:46
  • I am sorry to say that this solution will not work in IE11 and perhaps all newer versions. Note that the DDL options portion, where all the selectable items appear, will be as wide as the widest item in the list. I have been fighting this for over a year and have note found any solution other than a custom code control. – htm11h Mar 12 '15 at 13:59