0

I have a drop-down list in my cshtml view. But some strings are too long to be displayed in a single line. As in the below image:

enter image description here

I need to to set it so that only a certain number of characters is displayed in the dropdownlist and when the mouse is hovered over the whole string shall be scene, similar to a tool tip text.

<div class="span11">
        @Html.DropDownList("specificationList", new SelectList(ViewBag.Specifications, "SpecificationId", "Name", ViewBag.SpecificationId), new { @class = "dropdown-toggle" })
    </div>
Chamz Des
  • 183
  • 1
  • 2
  • 12

2 Answers2

0

The difficulty here consists in the fact that the DropDownListFor helper doesn't allow for setting custom attributes on the <option> tag. For your tooltip to work you will need to do have the following markup generated:

<select name="specificationId">
    <option value="1" title="some very long description">item 1</option>
    <option value="2" title="some very long description 2">item 2</option>
    <option value="3" title="some very long description 3">item 3</option>
    ...
</select>

In order to achieve that you could either write spaghetti code in your view to manually loop through the values of your model (totally non recommended) or write a custom HTML helper that will allow you to output this markup. I have shown an example of such helper on this post. And also here. You could of course adapt the helper so that if the text of the item is longer than certain number of characters it would generate truncate it.

Community
  • 1
  • 1
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
0

use css text-overflow: ellipsis

Madhabendra
  • 36
  • 3