Is there a way to make a vertically scrollable list of elements in streamlit?

Question

I was searching for ways to make a scrollable list of elements or even a way to fix the height of a column or a container and make it scrollable, so that a long list of elements would remain in the viewport and users wouldn't have to scroll to the bottom of the page.

How to proceed to make a vertically scrollable list of elements in Streamlit?

score 1 · Answer 1 · answered Mar 13 '23 at 09:02

It is possible to create a scrollable container in Streamlit using components and scrolling=True. Using the example from the Streamlit components documentation to display a HTML string with scrolling enabled:

import streamlit as st
import streamlit.components.v1 as components

def generate_random_string(length=100):
    import random
    import string
    return "".join(random.choice(string.ascii_uppercase + string.digits) for _ in range(length))

# bootstrap 4 collapse example
components.html(
    f"""
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
            {generate_random_string(10000)}
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
    """,
    height=600,
    scrolling=True,
)

gives:

In your case, since you need to make a list of more complex objects scrollable, you may need to create a custom bi-directional component. See the documentation about bi-directional components inside the Streamlit documentation.

Note: See this related entry on the Streamlit forum.

Is there a way to make a vertically scrollable list of elements in streamlit?

1 Answers1