Drop down list with long text wrapping

This is sweet, this makes long text in fixed width drop down lists (or HTML selects) wrap to the next line.  It's all done client side so you can still use data sources to populate your list first.  Works in FF, IE8 and IE7.  In your code behind add an onclick event to your drop down list like this:

ddl.Attributes.Add("onclick", "DDexpand(this);");

Then add this to the bottom of your page:

<ul id="ddexpanded" style="display:none; position:absolute; width:430px; border:1px solid black; background-color:White; font-family:Arial; font-size:smaller; list-style-type:none; padding-left:0px; margin-left:1px; cursor:default;">

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

<li style="padding-left:2px;" onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"></li>

</ul>

<script type="text/javascript">
document.onclick = click;
//close the drop down if you've click anywhere else
function click(e) {
var ul = document.getElementById("ddexpanded");
if (!e) var e = window.event;
var clicked = e.srcElement || e.target;
if (clicked.tagName != "SELECT")
if (ul.style.display == "") ul.style.display = "none";
}

//expand the drop down list when it is clicked
function DDexpand(ddl) {
//move the new list to under the drop down
var yoffset = (navigator.appVersion.indexOf("MSIE 7")>0) ? 26 : 6;
var ul = document.getElementById("ddexpanded");
ul.style.top = getY(ddl) + yoffset + "px";
ul.style.left = getX(ddl) + "px";

//set the list elements to the drop down elements and set onclick to select the item
//ul.getElementsByTagName is required because firefox adds rubbish to ul.childNodes
var lis = ul.getElementsByTagName("li");
for (i=0; i<ddl.options.length; i++)
{
//innerHTML required becuase firefox does not do innerText
lis[i].innerHTML = ddl.options[i].text;
lis[i].style.display = "";"";
if (ddl.options[i].selected) lis[i].style.backgroundColor='lightblue';
//switch required because ddl.options[i] uses the final value of i, not the current value
switch (i) {
case 0: lis[i].onclick = function() { ddl.options[0].selected = true; }; break;
case 1: lis[i].onclick = function() { ddl.options[1].selected = true; }; break;
case 2: lis[i].onclick = function() { ddl.options[2].selected = true; }; break;
case 3: lis[i].onclick = function() { ddl.options[3].selected = true; }; break;
case 4: lis[i].onclick = function() { ddl.options[4].selected = true; }; break;
case 5: lis[i].onclick = function() { ddl.options[5].selected = true; }; break;
case 6: lis[i].onclick = function() { ddl.options[6].selected = true; }; break;
case 7: lis[i].onclick = function() { ddl.options[7].selected = true; }; break;
case 8: lis[i].onclick = function() { ddl.options[8].selected = true; }; break;
case 9: lis[i].onclick = function() { ddl.options[9].selected = true; }; break;
}
}

//hide unused list elements
for (i=ddl.options.length; i<lis.length; i++)
{
lis[i].innerHTML = "";
lis[i].style.display = "none";
}

//show the drop down list
if (ul.style.display == "") {
ul.style.display = "none";
} else {
ul.style.display = "";
}

//close the normal drop down, do this last so if something breaks the normal drop down still works
ddl.blur();
}

//get element Y position
function getY( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue = iReturnValue + oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}

//get element X position
function getX( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue = iReturnValue + oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
</script>