Window scrolling after implement st.tabs

☁️ Community Cloud
1

Hi community,

after i had implemented st.tabs to my app i found out that on every app rerun (when finish) app scrooll down to st.tabs module.

I even tried with example code with docs and the problem still occurs.

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)

with tab2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

with tab3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

Have any of you had a similar problem?

P.

2

Hi @pm_st :wave:

Could you elaborate on what you mean by app scrolls down to st.tabs module? cc @lukasmasuch

3

Hi @snehankekre,

i recorded two screencasts.

With tabs implemented:

tabs gif

and without:

without tabs gif

4

@snehankekre

also, I noticed that this problem only occurs when I nest ‘st. tabs’ in a column using ‘st.columns’

P.

5

Thanks for the additional info! I’ve forward this thread to our engineers who’re taking a look.

6

Thanks for reporting this issue! No clue why this might be happening, I need to do some more exploration on this. Is it possible to share the full code snippet to reproduce this problem?

1 Like
7

Hi @lukasmasuch,

here’s my code snippet to reproduce problem:

import streamlit as st
import numpy as np
import pandas as pd

def main():

    st.header("Header")
    st.header("subheader")

    with st.form("form"):
        name1 = st.text_input("1st table name:")
        name2 = st.text_input("2nd table name:")

        submit = st.form_submit_button("Run App!")



    if submit:
        st.header(name1)

        df1 = pd.DataFrame(
            np.random.randn(50, 20),
            columns=('col %d' % i for i in range(20)))

        st.dataframe(df1)

        st.header(name2)

        df2 = pd.DataFrame(
            np.random.randn(50, 20),
            columns=('col %d' % i for i in range(20)))

        st.dataframe(df2)

        st.subheader("tabs")

        col1, col2 = st.columns(2)

        with col1:
            tabs = st.tabs(["Cat", "Dog", "Owl"])

            with tabs[0]:
                st.header("A cat")
                st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

            with tabs[1]:
                st.header("A dog")
                st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

            with tabs[2]:
                st.header("An owl")
                st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

        with col2:

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

            with tabs[0]:
                st.header("A cat")
                st.image("https://static.streamlit.io/examples/cat.jpg", width=200)

            with tabs[1]:
                st.header("A dog")
                st.image("https://static.streamlit.io/examples/dog.jpg", width=200)

            with tabs[2]:
                st.header("An owl")
                st.image("https://static.streamlit.io/examples/owl.jpg", width=200)


if __name__ == '__main__':
    main()
1 Like
8

Hi @pm_st, thank you for bringing up the issue with reproducible example :+1:

This issue is related to issue GitHub’s Issue-#5069 tabs switching cause scrolling up.

The fix can be found in the GitHub’s PR-#5116 Fix tabs switching couse scrolling up, which was merged on 11.08.2022.

The fix will be published in 1.13 release, you can also try Streamlit’s nightly-release :slight_smile:

2 Likes
9

@sfc-gh-tszerszen thank you very much for your help!

Have a nice week!

P.

1 Like
10

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