Click here to Skip to main content
15,886,110 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I need to wrap the text that exceeds the width of the dropdownlist as well as show a tooltip for all items in the dropdownlist
Posted

1 solution

1.In your controller code, you have to manipulate your items from the dropdownlist by testing on the string size that exceed a maxim length of chars (you should test with bigger values like "MMMMM...M") then in the end will result a List<SelectListItem> list ready to be used in your Model as property. Finally in your view you can render it by using
HTML
@Html.DropDownList("myDropDownList", Model.MyList, new { @class ="dropDownList" })

and by specifying a class (named "dropDownList" in my example) for styling the list with a proper font and font size at least.

2.Regarding how to show the tooltip here is the solution:
-populate in your controller a string with the text needed text to show as tooltip and add it as a property to your model;
-use this info as to show it as tooltip by using jQuery as is indicated in the next link: Example[^]
 
Share this answer
 
v4
Comments
SwarupDChavan 21-Mar-14 8:34am    
Hey Raul thanks but I have difficulty in understanding what you really wanted to say,can you please eleborate
Raul Iloc 21-Mar-14 8:55am    
Depends on how many space you will have in your UI for your dropdown list, by using a font (name and size) you should test by using big test data like next string: "MMMMMM...M" ==> n = maximum number of "M" that are visible. Then use this result in you controller code and keep only the "n" chars from your item values by using "Substrig(0,n)" then continue like I said above.
Raul Iloc 24-Mar-14 15:05pm    
So, did you try my solution?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900