How lower the sidebar to have white space at the top?

Using Streamlit
1

Hi Folks!
Please, I need to lower the sidebar to have white space at the top. Any suggestion?
I attached this image to illustrate.
Thank in advance.
Untitled

2

Hi @luciano_Mattar ,

You can achieve this by placing empty st.image or st.text components at the top of your sidebar.

And adjusting it’s width.

1 Like
3

Thanks sai_krishna1 for your help!
I’m looking for something like this link [css - How to change the height of streamlit sidebar - Stack Overflow].

import streamlit as st


st.markdown("""
    <style>
      section[data-testid="stSidebar"][aria-expanded="true"]{
        height: 80% !important;
      }
      section[data-testid="stSidebar"][aria-expanded="false"]{
        height: 80% !important;
      }
    </style>""", unsafe_allow_html=True)

st.sidebar.markdown("Adjust sidebar height")

The code do the opposite, but unfortunately I wasn’t able to adapt it to my code - I have no expertise in HTML and CSS. Please, any suggestion?

1 Like
4

I managed to adapt the code.

st.markdown("""
    <style>
      section[data-testid="stSidebar"] {
        top: 50%; 
        height: 80% !important;
      }
    </style>""", unsafe_allow_html=True)
1 Like
5

I am able to reduce the height of sidebar using this code. Now how to add image on top of sidebar which is common to both main area and sidebar?

1 Like
6

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