Sidebar minor design is little off

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?

2 Likes

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:

1 Like

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 :slight_smile:

1 Like

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! :slight_smile:

6 Likes

Thank you @randyzwitch for the background of the update !

1 Like

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

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