You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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
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:
I tried the last option, by adding custom CSS, setting
overflow-y: scroll
andmax-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.
The text was updated successfully, but these errors were encountered: