Sidebar width

I’ve been using streamlit for few weeks now and loving it!

I’ve been adjusting my sidebar width in some of my apps in the following manner:

style = “”"

[data-testid=“stSidebar”][aria-expanded=“true”] > div:first-child {
width: 500px;
[data-testid=“stSidebar”][aria-expanded=“false”] > div:first-child {
width: 500px;
margin-left: -500px;

st.markdown(style, unsafe_allow_html=True)

This worked well in version 1.10.0. But, in version 1.12.0 the sidebar background is thinner than 500px (even though the elements in the sidebar are adjusted to the width of 500px) , but they overlap the widgets in the main app…

I also just found out that by dragging the sidebar border i can adjust the width of the sidebar (only in version 1.12.0) background to 500px but this is manual and I dont want the users to do it every time.

Is there a fix?
thanks in advance

1 Like

I’m dealing with the same problem as you.

Someone has already reported a bug report for the same issue.

Provide a way to change the default width of sidebar #5218

I solved it by removing the setting
In the new versions the sidebar is adjustable from the app and it initiates to a pretty good width for me (wider than the previous default width)

1 Like