Add a toggle in the sidebar to activate wide screen

🎈 Using Streamlit
1

Hello Streamlit Community,

I am developing an application where I would like to provide the users with the flexibility to switch between the default layout and wide screen mode dynamically, based on their preference. I understand that st.set_page_config() must be called at the beginning of the script and that it cannot be used to change the layout once the app has started running. However, I am looking for a way to integrate a sidebar toggle to switch to wide screen mode without restarting the app manually.

Here’s what I have tried so far:

Check if ‘wide_mode’ is already in the session state

if ‘wide_mode’ not in st.session_state:
# Initialize it with a default value
st.session_state[‘wide_mode’] = False

Set the page config based on the current value of ‘wide_mode’

st.set_page_config(page_title=“Your App”, layout=“wide” if st.session_state[‘wide_mode’] else “centered”)

Sidebar checkbox to toggle the wide mode

st.sidebar.checkbox(“Wide mode”, value=st.session_state[‘wide_mode’], on_change=lambda: st.experimental_rerun())

This approach requires the user to refresh the page to see the changes, which is not the most seamless experience I want to offer.

  1. Is there a way to programmatically toggle the wide screen mode without needing a full page refresh?
  2. Can the layout be changed dynamically with a sidebar control in the current version of Streamlit, or is there a workaround that you would suggest?
  3. If it is not possible, could this be considered a feature request for future versions of Streamlit?

Any insights, suggestions, or workarounds would be greatly appreciated. Thank you for your time and help!

2

worked using the following:

Initialize ‘layout_preference’ in session state if it’s not already set

if ‘layout_preference’ not in st.session_state:
st.session_state[‘layout_preference’] = ‘wide’

Set the page configuration using the ‘layout_preference’ from session state

st.set_page_config(page_title=“Energy Dashboard”, page_icon=“:bulb:”, layout=st.session_state[‘layout_preference’])

Sidebar feature to allow users to choose the layout preference

st.sidebar.markdown(‘—’)
st.sidebar.title(“Layout Settings”)
layout_preference = st.sidebar.radio(
“Kies scherm grootte:”,
(‘wide’, ‘centered’),
index=0 if st.session_state[‘layout_preference’] == ‘wide’ else 1
)

1 Like