On a form in my application I have a combobox that allows the user to select one or more functions to be used in the task at hand.

I have used a Combobox that shows a list of checkboxes in its dropdown

enter image description here

So I currently display all selected items comma-separated in the combobox area. If multiple functions are chosen, this text gets too long to be displayed so I chose to cut it off with "..." like this:

enter image description here

My questions is: Is that the ideal way to abbreviate the text in the combobox? I could also think of, instead, showing the number of selected items like "3 functions", which I guess gives more information that the abbreviated list. What would be the best choice?

  • How many items there are in the list? For the limited number, you can use something similar to tags which are under your question. – Alexey Kolchenko Apr 9 '17 at 14:29
  • @Alexey there will be around 5-7items. Since their names however are not intuitive i don't think tags will work well – Jens Apr 9 '17 at 14:34
  • The names are not intuitive, but you are trying to hide these either with ellipsis, or "3 functions"? I propose not to hide anything and display the selected options, which is more obvious for users. Don't use combobox, instead use 100% wide control to display all the selected options. – Alexey Kolchenko Apr 9 '17 at 16:40

I would look into a tagging control similar to select2 . This might take up more space but i think its the best way to represent the current state of selection, in both your options the information is insufficient and might result in user clicking the dropdown again to see which selections are made.

enter image description here

  • Thank you for your suggestion. This just doesn't solve the problem at hand I think, because it is just a different way of selecting the active items. The problem of what to do when you run out of display space is the same here. If I made the combobox wider it would also fit more text on it after all. – Jens Apr 9 '17 at 15:02
  • 1
    That is true. However, did you see how select2 handles overflowing? It increases the height without cutting i.e. moving to the next row. – salman mazhar Apr 9 '17 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.