I would like to know how to show lengthy text in dropdown list. Each list item are more of a 2-3 line lengthy. Any suggestions will be appreciated. On hover tool tip is right way for dropdown list?
6 Answers
I wouldn't use rollover tooltips or additional buttons in the dropdown as user will be confused about the action. I would propose :
A) Adjust the width of the dropdown to the max length of the items or even breakdown the item after some width and show each item as a bloc :
B )If the content is very distinctive, cut the end of the text and use three dot (...), obviously this approach can create user confusion if the content is repetitive
answered Jul 13, 2016 at 11:22
You have two options:
1. Avoid lengthy text
Is it really necessary to have long text, do people need it to make the choice/selection? Long text can also be overwhelming and difficult to scan. In my experience there is a good chance that an alternative way of presenting options will come up after a brainstorm session. Give it a try!
2. Accept that it's lengthy but don't hide anything
So people need the whole text to make the choice/selection? Don't hide it then! If you can't claim the space that is needed for the options, a dropdown is most likely not the best way to present them.
Isn't a new page/screen with radio buttons and full width labels a better idea?
Or show the label over multiple lines. Word-break it down into multiple lines and make use of the vertical space and not horizontal. Deniz was a little ahead of me and illustrates this idea.
Don't expand labels horizontally
Don't break labels with an ellipsis (...) and expand on user action (hover or click). On hover how will this work on touch screens? On click how will people know they can see the whole text with a click, and that it will need two clicks to select? Also a button or link will not be clear and take away so badly needed space.
And I have not even mentioned that it is possible that users have to scroll horizontally when the expanded text falls off the screen.
Its not obvious whether a hover action is what one needs to view the full contents of that particular line of text. You could use the trusty [+] sign at the end of the visible part of that line of text.
answered Jul 12, 2016 at 7:17
On hover will not work on mobile devices so scrap that.
You could try the ellipsis to show that content has been omitted but not deleted.
Item One ...
You could try a + symbol to indicate there is more
Item One +
Click on either symbol to trigger extra menu items verticaly.
If you only have a few options but they're all very long, then maybe a select box isn't the way to go. It could become very annoying for the user to have to click to expand, or hover over, the text for several options just to be sure they are choosing the right one.
You could use a custom styled radio button group instead and implement a button to expand a section below which shows all of the options in full.
For example, see radio button section here: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Labeled-Checkbox-Radio-Button-Labelauty/demo/
Based on these thoughts I'm trying to achieve a good balance in better UX and making the component too complex. Here's what I came up with, hoping I have done a decent job explaining it with an image.
I want to know if this approach would make it worse or better. Any thoughts on the values we can choose for 250 and 500, better alternatives?
