Scrollable dropdown
Closed this issue · 0 comments
We use multiple multi-option dropdowns in the Leaderboard app.
These objects grow with the number of items select.
Both in the languages and tasks dropdowns, sometimes you can have multiple hundred options enabled at a time.
This makes these widgets grow and take up all screen space, leaving no space for the results table.
There are a couple of possible solutions here:
- We hide these in accordions - I don't like this since it doesn't solve the problem, just sweeps it under the rug.
- We put these options in a side bar that can be opened and closed at will - I don't know if we can do this easily in Gradio.
- We add scrollability to the dropdown, and limit its size.
I tried the last option, by adding custom CSS, setting overflow-y: scroll
and max-height
and while it seems to have worked, as the sizes of the dropdowns do get limited, you do not have a scrollbar and can't scroll in the selected options.
In a discussion (#1277) I have been recommended to write a custom component. This seems to be a laborious process involving writing Svelte, which I have zero experience with, and I'd like to avoid it.