Question

What kinds of options do I have when a dropdown menu is faced with text that is so wide that extending the menu’s width to accommodate is not feasible? i.e. It breaks the page layout, or just looks too ugly if the dropdown is adjusted to fit the long item.

Truncation? Truncation plus full hover text? Don’t allow items that long?

Anyone encountered any elegant solutions to this?

Thanks.

Answer 1

I agree with GordonB regarding truncating the options. Excessively long options can be hard to read, and as you mentioned it looks horrible.

If your dropdown is populated from user input, however, I’d restrict the length. What can be said with 15 words should be said with 5 … if it can’t, then perhaps a dropdown isn’t your best option.

For example, if your options are the titles of research papers and their authors, you can probably abbreviate them down to a few key words (‘String Theory and You [Brown 2008]’). On the other hand, if the options themselves differ by only a few words and lose meaning if they are truncated (e.g. a list of options like ‘Peanut butter and grape jelly sandwich with carrot sticks and soy milk’ and ‘Peanut butter and boysenberry jelly sandwith with carrot sticks and 2% milk’) maybe you would be better served by displaying all the options sequentially, accompanied by a checkbox or radio button as appropriate.

(If you’re using ASP.NET, basically I’m saying using a repeater instead of a DropDownList)

This second approach might also allow you to incorporate other elements that you wouldn’t be able to in a dropdown. Take a look at this Amazon search result page for ideas.