Limit visual size of a dropdown with multiple selections

Dash Python
1

Is there a way to limit the visual size of a dropdown that can make an arbitrary number of selections? In the example below, the dropdown box will visually expand to show all of the selections. I’d love to be able to make an arbitrary number of selections in a dropdown menu and keep the dropdown box dimensions fixed (or maybe fixed after a limited amount of visual expansion to accommodate two or three rows of selections).

Thanks!

11%20PM
11%20PM1962×1002 252 KB

1 Like
2

Any updates on this?

This really makes the component unusable for me.

Surely, there must be some custom CSS that does the job, but the sole reason why I decided to use Dash was to avoid dealing with such things. But if anyone has an idea, I’d be happy :slight_smile:

Or how have you dealt with the problem OP?

3

I would also be interested in a way to maybe show only one or two lines which, however, are scrollable.
Otherwise it really messes up the entire layout once all values are selected.

4

Is there a way now to deal with this? I’m facing the same issue.

5

Was any solution to this issue ever found? Could the dropdown be made scrollable using “overflow-y:auto”?

6

For anyone who stumbles across this thread, here is the solution I came up with (“y-variable-selector” is the ID of my dropdown):

#y-variable-selector .Select.dcc_control.is-open {
  max-height: 100%;
  overflow-y:visible;
}

#y-variable-selector .Select.dcc_control {
  max-height: 70px;
  overflow-y:auto;
}

Using this in your CSS ensures that you can easily see all the options when using the dropdown but it immediately shrinks back to your set max-height after your selection(s).