Specify sidebar width

🎈 Using Streamlit
1

Is there a way to specify the sidebar width? I researched but had no success, can somebody give me a help?

2 Likes
2

Do you mean setting the width of the sidebar?

3

Yes, I would like to set the specific width ot the sidebar to make it larger than the default width.

4

There’s no option to set the width directly but you can drag it to resize.

Screen Recording 2023-06-22 at 3_scaling-0.5_fps-24_speed-9.93_duration-0-8

1 Like
5

Maybe with CSS it would be possible?

6

You could try using custom CSS for sure.

Be mindful that the structure of the HTML or the class names can change at any time so the following method might not work in the future.

import streamlit as st

# Inject custom CSS to set the width of the sidebar
st.markdown(
    """
    <style>
        section[data-testid="stSidebar"] {
            width: 500px !important; # Set the width to your desired value
        }
    </style>
    """,
    unsafe_allow_html=True,
)

# Example sidebar content
st.sidebar.header("This is the sidebar")
st.sidebar.text("This is some text in the sidebar")

# Example main content
st.header("This is the Main Content Area")
st.text("This is some text in the main content area")
5 Likes
7

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