Scrolling text containers

[travisbarton]

Hey all,

I have a super long text stream and it needs to only take up an NxM pixel area. It would work just fine if I could put it inside a container that can scroll but I haven’t found a solution yet.

I saw this post but I don’t understand the solution. Is there a better way to get a text area that can scroll?

[luqmannur.ai]

From what I understand, you could do inspect element for a specific part of the web page and grab the element class for you to apply the CSS styling needed. In this case, once you identified the class, you can add overflow: scroll. Hope this can lead you to the solution as my understanding of this is also quite shallow.

[igezeani]

Hi all, did anyone find the solution to this? Thanks in advance.

[blackary]

One option is with components, like this:

import streamlit as st
from streamlit.components.v1 import html

lorem = (
    """
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec
vulputate lacinia, nunc nisl aliquam mauris, eget aliquet nisl nisl et nunc.
Sed euismod, nisl nec vulputate lacinia, nunc nisl aliquam mauris, eget aliquet.</p>
"""
    * 10
)

html(lorem, height=100, scrolling=True)

[smaranjitghose]

This works but the output is not desirable if one wishes to use a custom theme

Example:

[smaranjitghose]

There is a dedicated third party streamlit-scrollable-textbox component that works perfectly for this purpose (even with custom theme)

Installation:

pip install streamlit-scrollable-textbox

Sample Usage Code:

import streamlit_scrollable_textbox as stx

long_text = "Input here"
stx.scrollableTextbox(long_text,height = 300)

Demo in a real world application

(From my AI AudioTranscriber MVP)

[Jessica_Smith]

Hey all!

Wanted to update you that as of the 1.30.0 release, st.container can be now configured with a height to create grids or scrolling containers!

Check out more in the docs.

Looking forward to hearing what you think.

[david-waterworth]

Thanks @Jessica_Smith - this works well!