Scrollbar for a high number of tabs

Betze · May 5, 2023, 7:34pm

Hi,

is there any possibility to scroll through a high number of tabs (>30) with a scrollbar or anything similiar to it?
The only way I found out was using the arrow keys.

Thanks for your help!

Caroline · May 11, 2023, 12:47am

Hey @Betze,

Thanks for sharing this question! Can you elaborate on what type of tab navigation you’re looking for? Are you basically looking for a horizontal scrollbar that moves the user through the tabs?

Betze · May 13, 2023, 9:58pm

Hey @Caroline,

a horizontal scrollbar would be perfect.
Is there already a way to implement it?

In this picture you can see my problem:

The only way that I found out to navigate is by using the keyboard.

Thanks for your help

mathcatsand · May 13, 2023, 10:11pm

There is an open feature request for this. Be sure to vote on it as an improvement. I agree that a better visual cue and option to scroll with a mouse wheel should definitely be added!

github.com/streamlit/streamlit

Tabs hidden when titles exceed the content area width (no ability to scroll)

opened 04:41AM - 16 Oct 22 UTC

blipk

type:enhancement feature:st.tabs

### Summary If you have too many tabs, or even a couple with long titles, and… their total width exceeds the main area with, the latter ones become inaccessible. There should be an ability to scroll through them, perhaps just some small arrows at each end. ### Steps to reproduce [![Open in Streamlit Cloud](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://issues.streamlitapp.com/?issue=gh-5552) Code snippet: ``` tab_names = [] for i in range(100): tab_names.append(str(i)*4) tabs = st.tabs(tab_names) ``` **Expected behavior:** Should be able to scroll the tab bar when tabs exceed the screen width, hiding them is bad UX. **Actual behavior:** My tabs are inaccessible. ### Is this a regression? no ### Debug info - Streamlit version: streamlit share - Python version: 3.10 - Browser version: Chrome latest ### Voting for feature requests Community voting on feature requests enables the Streamlit team to understand which features are most important to our users. **If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**

I am playing with the CSS to see if there is any simple work around. Will post here and in the issue if I find something worth noting.

NOTE!

If you have the option on your mouse to scroll horizontally, it works. In my case, if I click my mouse wheel, I get the scroll pointer and can move my mouse left and right to scroll.
You can also hold SHIFT while scrolling on a mouse wheel to get the horizontal scroll on a long tab list.

Betze · May 13, 2023, 10:28pm

Thanks for your answer!
It needs to be easy and intuitive for multiple users. So I think the horizontal mouse wheel is also not the prefered way for me.
I will vote on the feature request.