how to handle long text in dropdownlist control in ASP.NET [duplicate]

Answer 1

You might consider setting a fixed width then setting the title attribute to provide a tooltip type of functionality so that the text shows up when hovered over.

After binding / populating the dropdownlist you can set the title attribute on each item to its own text:

foreach (ListItem li in ddl.Items)
{
    li.Attributes.Add("title", li.Text);
}

Answer 2

Have you considered showing initial few characters and then using a tool tip to show the complete string when the item is selected?

Answer 3

One pleasant alternative is to show only part of the text in your column, plus a button or graphic of some sort that indicates they can see more by either hovering over the cell or clicking on something.

For example:

Name | Id   | Cover Letter
----- ------ ----------------------------------------------------
Rex  | 1000 | I am seeking opportunities in t... (click for more)

You can code this by hand, but there are a lot of tools out there that make this easy, particularly if you're comfortable with JQuery. I found the following just quickly browsing the JQuery windows and overlays plugins:

• JQuery Callout Plugin, which looks very nice.
• JHelperTip, "The multi-use tooltip for JQuery."
• Coda Bubble for a slick, cute style.

Answer 4

I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

It's a jquery plugin to make a styleable unordered list backed by the hidden select element.

The source is on github: https://github.com/tncbbthositg/GiantDropdown

Answer 5

If the text is very wrong, I think you may have to consider a different approach rather than just displaying it all in a DropDownList.

You could have the DropDownList only display a small part of the text as a summary and then display the full text next to the list as the user changes the item. I would recommend this is done using AJAX to keep the user experience nice.

To do this, wrap the DropDownList and a Label to the right of the list in an UpdatePanel. Then, the onSelectedIndexChanged event of the DropDownList would look something like this:

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
   var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
   Label1.Text = item.Text;
}

Answer 6

Try using CSS to add a fixed width to your dropdown, like:

select {width: 150px}

Whilst the dropdown itself will be of a fixed width and may not show all of the text, the option elements should expand to the width of the widest element.

May not work in IE7 and below, in which case the this link may be of some use for those browsers: