How do you deal with very long dropdown values?

  • 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.

    Just a point of clarification, I believe the first line should be "as wide as the widest value"?

    @jcolebrand Generally yes :). The problem is that values are long (afaik) and fields are wide, and I didn't feel comfortable writing "as wide as the longest value", so I wrote this instead :).

    Are you referring to touch input or mouse\keyvboard ?

    @AsafBO Mouse&keyboard.

  • alexeypegov

    alexeypegov Correct answer

    9 years ago

    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

    enter image description here

    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.

    While a good solution, there still is the problem with (theoretically) infinitely long file names. At one length or another, combined with the location of the dropdown box on the view, the screen will run out of space. Your solution leaves that problem unsolved.

    @kontur and you're wrong if you feel like you can handle a (theoretically) infinite long names. That problem can not be solved. There are a number of options which can help you to minimize that problem and that's it :)

    That's the direction that I've been exploring as well. Have you seen this implemented anywhere?

    @VitalyMijiritsky Not exactly, but I've done something like this (a dropdown with long version strings of some library, and combo showing a short variant of the selected version) a couple of years ago for some IDE.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM