Updating Object Heights in Sidebar

[Ethan_Weiss]

Hello forum.

I have created a multipage app and on certain pages I add additional elements to the sidebar. I am looking to set the height of the components in the sidebar.

Specifically, I would like to be able to control the height of the pages menu within the sidebar so that when there are additional components in the sidebar, I can still see all of the pages without scrolling down.

See below screenshot for context: Note the scroll bar in the pages menu (there is another page below that you have to scroll to see).

Any help on this is greatly appreciated. Thanks.

[edsaac]

You can use a CSS selector to modify that minimum area for the list of pages.

import streamlit as st

if st.sidebar.checkbox("Make room"):
    st.sidebar.markdown("""
        <style>
        [data-testid='stSidebarNav'] > ul {
            min-height: 60vh;
        } 
        </style>
        """, unsafe_allow_html=True)

"# Title of app"
"Some repeated content"*100

with st.sidebar:
    for i in range(5):
        st.button(f"Button {i}", use_container_width=True)

[Ethan_Weiss]

This works perfectly. Thank you.

I’m wondering if there is documentation that I would’ve been able to figure this out from because I couldn’t find detailed documentation on the different layout options on various streamlit components.