I have a one-to-many relationship, say a Monkey can have lots of Bananas.

The selection part is done by opening a popup and showing Bananas with a filter, add/remove buttons, etc.

My issue is how to display this selection back to the user. There can be a lot of Bananas (between 1 and 300 tops), and I don't want to take all the space to display them all.

I'd like to use as much space as one or two rows.

My thoughts:

  1. List the items in a combobox

The displayed value would show the number of selected Bananas. When you click on it, you would be able to see the whole list BUT not change the selection (I'd put an edit button next to it for that purpose).

My issue with this is that I've always used comboboxes to select things, never to display things.

  1. Homemade "drawer widget".

Same idea as above, but wouldn't look like a combobox so hopefully would not confuse users when they see they can't interact with it.

  1. Displaying some generated icons for each Banana (like Gravatar).

Doesn't suit my case well because we don't use this at the moment so the user wouldn't be able to recognize the icons.

  1. Use some Banana Groups.

My Bananas are already classified, so I thought I could use this to show Groups instead of Bananas. For instance I could display all the Group names followed by the number/percentage of Bananas selected within this group. That would take less space and may help the user in making sure its selection is complete.

  • Can you have more than one type of child item associated with each parent item? In your example, can monkeys only have bananas, or can they have bananas, apples, and/or oranges?
    – Brian
    Mar 12, 2015 at 15:56
  • @Brian it's just bananas.
    – pyb
    Mar 13, 2015 at 14:29

1 Answer 1


When showing multiple items a vertical list is usually the way to go. The hardware world is built for vertical scrolling (mouse wheel, touchscreen, etc.)

A pattern I like to use in your situation is to show as many items that will fit followed by a clear "show more" link. The benefit to this approach is that if most people only ever have 1-3 items then all information can cleanly be displayed and users don't need to know about the 300 item case.

As soon as there are 4 or more items I will add the first 2 items followed by a link to "show more" that communicates the list is longer and after clicking the link all the items would be displayed followed by a "show fewer" link since every action needs an equal but opposite reaction.

  • Kind of the "drawer solution". I like it!
    – pyb
    Mar 12, 2015 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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