Flex Container

[Fan2]

Hi, could you please help with css style?

with st.sidebar():
  with st.container():
    for 1 in rang(100):
       st.text_input()
  st.button()

How to apply css, so that container has a scrollbar, and it takes all the available vertical space, sidebar itself does not scroll, and also button is always kept visible?

[edsaac]

No need for CSS in this case, just set a fixed height for the container:

with st.sidebar:
    with st.container(height=200):
        for i in range(100):
            st.text_input(f"Input {i}")
    st.button("Click me")

[Fan2]

This is a simple solution, but it does not use available screen space, and does not fit different screen size.

[edsaac]

That’s a good point, it’d be nice if the height parameter of a container could be set in viewport units. The alternative is to set a key to the container and use that to target the container with CSS:

app.py

import streamlit as st

st.html("style.css")

with st.sidebar:
    with st.container(key="sidebar-cont"):
        for i in range(100):
            st.text_input(f"Input {i}")
    st.button("Click me")

style.css

div.st-key-sidebar-cont {
    max-height: 70vh;
    overflow-y: scroll;
}