Sidebar minor design is little off

[lucaseo]

Hello all!

I’ve recently installed the latest stable Streamlit (0.72.0)

I discovered that the sidebar layout has changed.
In previous version (0.69.1 for example), all the sidebar widgets started from fairly nice height. (pic 1)

However, on 0.72.0, I discovered that sidebar widget starts from a lower position, with a bit wider sidebar (pic2)

(note: the screenshots were taken with exact same size)

I had no problem with sidebar layout whatsoever, and I’m just curious why it has changed, and was it such a crucial part to change.

I wish the sidebar layout goes back to the way it was…

Or, does anyone know how I can customize it?

[randyzwitch]

Hi @lucaseo, welcome to the Streamlit community!

I suspect this is an artifact of a huge refactoring @kmcgrady did in preparation for supporting themes in Streamlit in 2021. I’m not a CSS expert, but I suspect you could fix this in the short-term using the st.markdown css trick:

Amend Streamlit's default colourway like on the spacy-streamlit App?

I did something like this the other day and it worked: st.markdown( """ <style> .reportview-container .markdown-text-container { font-family: monospace; } .sidebar .sidebar-content { background-image: linear-gradient(#2e7bcf,#2e7bcf); color: white; } .Widget>label { color: white; font-family: monospace; } [class^="st-b"] { color: white; font-family: monospace; } .st-bb { background-color: transparent; } .st-at { background-color: #0c0080; } footer { …

[PeterT]

Hi lucaseo,

Welcome to the forum! I had the same problem and ended up waiting to install version 0.72.0. It seems like an issue has been opened since you reported this, so it seems likely we will get ‘the old’ version back in a coming update

[ash2shukla]

Hey @lucaseo,

As @randyzwitch suggested a simple change in st markdown should do the job,
Just add this at the top in your script and it will work like this,

import streamlit as st

st.markdown("""
    <style>
    .css-1aumxhk {
        padding: 0em 1em;
    }
    </style>
""", unsafe_allow_html=True)
st.sidebar.header("I am up")

Hope it helps!

[lucaseo]

Thank you @randyzwitch for the background of the update !

[lucaseo]

Thanks @PeterT for letting me know that the issue has been created
Really looking forward to the future updates ! Cheers !

[lucaseo]

@ash2shukla Thank you for the trick ! It’s really helpful