Set height of sidebar in a multipage app and sidebar components

[johanneswerner]

I have a multipage app see example below.

However, if I want to add information to the sidebar, e.g. with st.sidebar.write("hello sidebar"), then I receive this split sidebar with the scrollbar for the pages part.

How can I move the horizontal line so that all entries are readable at once? Or is there a possibility to scale this automatically that the lower part only uses the minimum amount of space it needs (based on the screen size) and does not split in the middle instead?

Thank you very much.

[edsaac]

Is this what you are looking for?

Updating Object Heights in Sidebar

You can use a CSS selector to modify that minimum area for the list of pages. [image] 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)

[johanneswerner]

Yes, indeed, thank you very much. Closing as duplicate.

I am wondering if it would be possible to implement this into streamlit at some point with a function that takes the desired height as input.

[edsaac]

You could adjust the value of min-height to something else using an f-string:

Short	Tall

Code

import streamlit as st

pages_height = st.slider(
    "Height of pages list",
    min_value=15,
    max_value=100,
    value=50,
    step=1,
    format="%d %%",
)

st.sidebar.markdown(
    f"""
    <style>
    [data-testid='stSidebarNav'] > ul {{
        min-height: {pages_height}vh;
    }} 
    </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)

notice the double {{ and }} when dealing with f-strings.

---

I agree that having a native control for the pages configuration would be ideal, and this would be a good candidate for a feature request.