Sidebar minor design is little off

Using Streamlit
1

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)

Screen Shot 2020-12-15 at 1.56.14 AM
Screen Shot 2020-12-15 at 1.56.14 AM371×596 16.2 KB

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

Screen Shot 2020-12-15 at 1.56.18 AM
Screen Shot 2020-12-15 at 1.56.18 AM371×596 16.8 KB

(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
2

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
3

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
4

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")

snippet
snippet880×247 86.3 KB

Hope it helps! :slight_smile:

6 Likes
5

Thank you @randyzwitch for the background of the update !

1 Like
6

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

7

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