Updating Object Heights in Sidebar

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.

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"):
        [data-testid='stSidebarNav'] > ul {
            min-height: 60vh;
        """, 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)
1 Like

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.

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