Scrolling in a column

Using Streamlit
1

Hello! My page is divided in 3 columns, I was wondering if maybe it’s possible that when the page is longer than the screen because of the content of one of the columns, to have the scroll funtion only in that column instead of the entire page.
I mean, to have the rest of the columns without scrolling, I don’t know if I’ve explain myself correctlly.

Does someone know if that is possible? Thanks you so much.

2

You’d need a little extra care if you have more than one set of columns to format, but here’s a simple example.

import streamlit as st

st.header('Scrolling Columns')

cols = st.columns(3)

cols[0].write('A short column')
cols[1].write('Meow' + ' meow'*1000)
cols[2].write('Another short column')

css='''
<style>
    section.main>div {
        padding-bottom: 1rem;
    }
    [data-testid="column"]>div>div>div>div>div {
        overflow: auto;
        height: 70vh;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)

image
image735×903 20.3 KB

2 Likes
3

Thanks you!

4

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

6

Hey @saraibaallo,

There are also updates for st.container as of Release 1.30.0 if this helps. You can now set a height to create grids or scrolling containers!

Check out more in the docs.