How do you deal with very long dropdown values?

Question

Usually, dropdown menus are made as long as their longest value. However, that works well only for dropdowns with a predefined set of values. How can we deal with a dropdown that receives its values dynamically and displays user-generated values which don't have a reasonable size limit? For example a file name may be extremely long. I'm looking for a way to solve this which would still let me use the dropdown in a reasonable way (e.g. without having to always place it in its own row for fear that it might grow and mess with my layout).

Truncating values at a low cutoff point won't work well since the difference between the values might be at the last characters (again, the file extensions example is a good one). I can use it for the edge cases, but I'd like to get there as late as possible.

Answer 1

And what about to make a dropdown popup wider and think about how to show the selected value in the combobox itself?

Here is an example of how it may look like:

1. Dropdown popup contains the whole path to the files and it's wider than the combo
2. When selected value are modified somehow (cutting off the path, for example) so it will fit into the combobox
3. A tooltip may show the original value if needed

Unfortunately, there is no obvious way to shorten the names of the files automatically. You may crop them from the beginning or from the end, no matter, but it still will be a meaningless string. The way you may try to do is to ask your users to name files before upload (or after, within some limits), or place a preview icon somewhere (if it's an image) and name files automatically somehow (using today date, or just "1", "2", etc) so their names will fit.

Or you may try to rethink the idea and avoid combo at all if possible.

Answer 2

The answer is probably different depending on the type of content in the menu. If, as you note, the items represent filenames, Apple recommends inserting an ellipsis in the middle of the items, like so:

They mention this explicitly in their Human Interface Guidelines (HIG) too:

An ellipsis character can also show that there is more text than there is room to display in a document title or list item. If, for example, the name of an item is too long to fit in a menu or list box, you should insert an ellipsis character in the middle of the name, preserving the beginning and the end of the name. This ensures that the parts of the name that are most likely to be unique are still visible.

Answer 3

There is another idea that is used by mobile phones. Instead of using a drop-down menu you could popup a modal dialog with a list that will prompt for the users choice.

This will let you the freedom to choose the layout of each item, you could even add an icon to distinguish between different types.

Long values will not have to be truncated as you could just add a line break, Still you have to choose how to display the item once it was selected. If it is possible for you to go this way that means that using a drop down field is optional to popup the "Option List Dialog" you could design a custom control that have two lines to fit more text.

something like this..

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

You could use a multi-line dropdown or a set of multi-line radio buttons. In the case of filenames, "/" is an ideal place to break apart lines (e.g., by inserting a 0-width space).

There may also be system-specific name abbreviations. E.g., /Users/myself is traditionally shortened to ~ .

Answer 5

I think the answer is; don't use a dropdown control.

If the content you're trying to display isn't suitable for a particular control that you want to use, that should really be the clue that tells you that the control you want to use isn't the correct one. Don't shoehorn content into something that doesn't suit it.

Reading the question I extrapolate from that the main requirement, being:

...receives its values dynamically and displays user-generated values which don't have a reasonable size limit

You don't state why you need this to be a dropdown, other than this statement:

...without having to always place it in its own row for fear that it might grow and mess with my layout

Taking this into account it appears the main requirements for this project is that:

• A. You want a way to display a dynamically generated set options that can be of any number of characters.

• B. You want to keep a fixed constant layout irrespective of the contents of this list.

Therefore you should select a control that can handle such content and will allow you to specify up-front how everything is going to be constantly laid out.

Because of this I suggest the following control:

^{download bmml source – Wireframes created with Balsamiq Mockups}

It's a standard control, it doesn't require any fancy JavaScript to implement, and it's understood by a large variety of users.

Fit the control to the content, not the other way around.

Answer 6

For desktop applications you can truncate to maintain your layout and then show the full value as a tooltip.

I'm not sure what the best option for mobile would be. One possibility would be to: select, display fulltext in an overlay, but keep the dropdown open on a single touch; and to select and close the dropdown on a double touch.

Answer 7

You could use a list view which is both resizeable and scrollable instead of a drop down, that way you can limit the initial size, but let the user scroll or resize to read/copy longer values.

Tool-tips will enable the user to read longer values, however, if the user wants to see the end of multiple rows (e.g. just the file names in a single directory), then the user will have to move the mouse from value to value in order to read, instead of scrolling right and then up and down.

Alternatively, you could consider showing the beginning and end of the values (with ... in between and show full value in tool-tip) and the the users define how many characters to display from each end (useful for file paths, to show both the global location (e.g. drive and top level folder) and the local location (e.g. file name and immediate parent folder name)).

Answer 8

You can restrict the width of dropdown menus with css

.limit-width{
width:240px;  /*You may specify width here.. */
}

and then can apply it as desired..

<select name="test" id="test" class="limit-width">

The benefit of this approach is that it won't disturb your page layout and will produce output as reflected in alexeypegov's screenshot in this post..So, imho, i feel it would be a good choice if not best..