Tabs not working if columns are "broken"

Using Streamlit
1

I have an app with two tabs.

In the first tab you load data, in the second you define the chart parameters and plot your chart.

The widgets in both tabs are organized in four columns. So the stuff that is under the tabs in the four columns is - correctly - only visible under “their” tab (disappears as expected, if when you change tab).

To allow for plotting a larger plot, in the second tab, I “break” my four columns and substitute them with a new set of two (larger) columns.

The result is that my chart is visible on both tabs, which is not what I want.

Is there a way to make tabs “own” a “hierarchy” of columns that might change?

Thanks

Fabio

2

Could you please share a minimal reproducible code snippet which shows what you’re experiencing? See this post for more.

3

Hi,

Very good suggestion!

I tried writing a snipped of what I wanted:

4 cols each for tab 1 and tab 2 and dog picture visible only when in Tab 1 and owl picture visible only when in tab 2.

It works fine. I went back to my code made a couple of modifications and works fine there two. Thanks again.

import streamlit as st

def run_first_tab():
    with tab1:
        colWidthArray=[1,1,1,1] 
        col1,col2,col3,col4 = st.columns(colWidthArray)
        with col1:
            st.info("A in col 1 tab I")
        with col2:
            st.info("B in col 2 tab I")
        with col3:
            st.info("C in col 3 tab I")
        with col4:
            st.info("D in col 4 tab I")   
        st.image("https://static.streamlit.io/examples/dog.jpg")                                   
    return None
    
def run_second_tab():
    with tab2:
        colWidthArray=[1,1,1,1] 
        col1,col2,col3,col4 = st.columns(colWidthArray)
        with col1:
            st.info("E in col 1 tab II")
        with col2:
            st.info("F in col 2 tab II")
        with col3:
            st.info("G in col 3 tab II")
        with col4:
            st.info("H in col 4 tab II")
        colWidthArray=[1,1] 
        colA,colB = st.columns(colWidthArray) 
        with colB:    
            st.image("https://static.streamlit.io/examples/owl.jpg", width=400)        
    return None

tab1, tab2 = st.tabs(["first tab with with 4 cols and dog", "second tab with 4 cols and owl"])
run_first_tab()
run_second_tab()

best

Fabio

1 Like
4

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