Looking for css "hack" for st.tabs to make first tab scrollable and second one not

Using Streamlit
1

Summary

Hi! I’m looking for a way to make one tab scrollable and second one not. It’s quite easy to turn-off scroll for the whole app, however I find it quite hard to “hack” css in a way that will turn-on scrolling only for the first tab.

Steps to reproduce

Code snippet:

Tabs code:

import streamlit as st

tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg", width=200)
   st.write("Some very long text to make tab scrollable")
with tab2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg", width=200)
   st.write("Some very long text to make tab scrollable")
with tab3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
   st.write("Some very long text to make tab scrollable")

Css turning-off scrolling for the whole app:

section[tabindex="0"] {
    overflow: hidden;
}

Expected behavior:

First tab is scrollable and second is not

2 
import streamlit as st

tab = st.selectbox('Tab to shorten and make scrollable:', [1,2,3])

cats, dogs, birbs = st.tabs(['Cats','Dogs','Birbs'])

with cats:
    st.write('meow '*1000)
with dogs:
    st.write('woof '*1000)
with birbs:
    st.write('tweet '*1000)


css=f'''
div.stTabs > div > div:nth-of-type({tab+2}) {{
    color: red;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}}
'''
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
2 Likes
3

Hi Debbie, thank you! It works like a charm.

Note to myself: when you can’t get to something directly, count the elements.

1 Like
4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.