[Feature Request] Detect Wide / Centered mode

Random
,
1

Hi, I’m new to the forum and have only been experimenting with streamlit for a few days now but I’ve stumbled upon an issue that doesn’t yet appear to have a fix.

I want to dynamically layout my page dependant on whether wide mode is active.

The only related st. command I could find was the st.set_page_config(layout="wide/centered) which is fine for the initial set up but doesn’t work dynamically.

I was trying the following:

# Page Tabs
tab1, tab2, tab3, tab4, tab5, tab6 = st.tabs(["Porfolio", "Charts", "tab3", "tab4", "Data", "Debug"])

  with tab1:
      tab1, tab2 =st.tabs(['Chart Display', 'Balance Sheet'])

  df = pd.read_csv(f'data/file/path')
  
    with tab1:
        if st.set_page_config(layout="centered"):
            
            chartType = (st.selectbox("Chart Type",["Sunburst", "Bar & Scatter"]))
        
            if chartType == "Sunburst":
                fig = px.sunburst(df, path=['Asset','Symbol'], title='Portfolio', values= 'USD Value')
                st.plotly_chart(fig)
            
            elif chartType == "Bar & Scatter":
                portfolioChart()
                
        elif st.set_page_config(layout="wide"):
            col1, col2 = st.columns(2)
            
            with col1:
                fig = px.sunburst(df, path=['Asset','Symbol'], title='Binance Portfolio', values= 'USD Value')
                st.plotly_chart(fig)
            
            with col2:
                portfolioChart()
                
    with tab2:        
        col1,col2 = st.columns(2)
        st.markdown(hide_dataframe_row_index, unsafe_allow_html=True)
        st.dataframe((df[['Asset', 'Quantity', 'Price', 'USD Value']]),use_container_width = True)

This would in theory add 6 tabs, within the first tab we would expand into 2 more tabs.

From there if the page is in “centered” mode, add a drop down button to select which chart to view. However in wide mode it would instead display both charts side by side.

So that didn’t work as it is only possible to call st.set_page_config(layout=“centered”) as the first st command in an app.

I did also try to hack around this by putting the config statement first:

If st.set_page_config(layout=“centered”):
APP CODE FOR CENTERED LAYOUT
else:
APP CODE FOR WIDE LAYOUT

but this just locked the layout, which was to be expected.

So if anybody knows a way to set conditional statements relative to the layout mode please let me know but otherwise I think this would be a great feature to add for those that want to make apps with dynamic layouts.

2

Hi @mabanham,

Thank you for sharing this! Feel free to create a feature enhancement request here so our product and engineering teams can take a look.

3

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