Using CSS to create scrollable streamlit container

Custom Components
1

Hi I would like to adjust streamlit container to have a default size and the ability to scroll using CSS as I have found no way to achieve without using those. Is there a guide on how to start the implementation.

For more information, I want to fit a default height container with variable wall of text such that if the text is long the user will have the option to scroll on that specific container instead of the whole webpage.

2

Hi, thanks for posting your issue. We love hearing from the community!

I think for this, you might want to use the html component: Components API - Streamlit Docs

You might have to write some hacky html but after that, i think you might be able to pass scroll=True.

Let me know if this helps.

3

It does helps, thanks for the reply

1 Like
4

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

6

Hey @luqmannur.ai,

Hope you’ve been well. Just wanted to update you this is now natively supported in Streamlit as of Release 1.30.0! You can set a fixed height to st.container allowing grids and scrolling containers.

Check it out in the docs! Looking forward to hearing what you think. :blush:

1 Like
7

Can we achieve auto scrolling in st.container?

8

As far as I can tell the answer is yes. What happened when you tried?

9

I need to know if we can use smooth or auto scrolling. Currently I’m trying to pass message inside the st.container, but the latest message is not immediately visible; users need to scroll down to see it.

10

I may be misunderstanding what you mean by auto scrolling, and “smooth” seems unrelated to “users need to scroll down” so I am not really sure what you are after.

11

image
image1102Ă—477 30.7 KB

as you can see messages are passed in container, where latest message are not immediately visible need to scroll down to see it. Does st.container can handle auto scrolling

12

IIUC, there is no supported way of doing what you want. Maybe some CCS / JS trick can do it, but that is way above my skills.

You might want to give a thumbs up and subscribe to this issue:

13

Thanks @Goyo

14

I had the same issue with a chatbot app I created. I just added empty lines at the end of the main container so that the chatbot messages appear before the chatbot input like this:

# Adds empty lines to the main app area to avoid hiding text behind chat buttons
# (might need adjustments)
st.write("")
st.write("")
st.write("")
st.write("")
st.write("")

Sort of ugly solution but it worked fine for me.