Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollable dropdown #1304

Open
Tracked by #1303
x-tabdeveloping opened this issue Oct 21, 2024 · 0 comments
Open
Tracked by #1303

Scrollable dropdown #1304

x-tabdeveloping opened this issue Oct 21, 2024 · 0 comments

Comments

@x-tabdeveloping
Copy link
Collaborator

x-tabdeveloping commented Oct 21, 2024

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:

  1. We hide these in accordions - I don't like this since it doesn't solve the problem, just sweeps it under the rug.
  2. 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.
  3. 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.

@x-tabdeveloping x-tabdeveloping changed the title We need to figure something out for the scrollable dropdown. I tried custom CSS (overflow-y: scroll) but scrollbars seems to have been tempered with by the Gradio folks, and while it limits the size of the dropdown, the scroll doesn't work at all. Scrollable dropdown Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant