how to handle long text in dropdownlist control in ASP.NET

Question

i have one dropdown list which is pouplated by database . Its value feild contain records id and option feild contain the text of record . But the record text entries are very long and makes my dropdown so long that it totally chnage the outlook of my webpage. when i cut down the width it also cut down the text displayed . Is there any option that my webpage also looks good and user can see the full text as well like Wraping text or scroll or any thing like that...

how to handle this ... please help me

Answer 1

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:

Answer 2

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 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

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

Answer 5

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);
}