How to add scroll bar in st.expander

🎈 Using Streamlit
1

I put many columns in st.expander, if I change the screen size or add more columns, each column width will be smaller, and the button size will be changed.
image

is there any method to add a horizonal scroll bar in st.expander?

2

There are extra considerations if you have multiple expanders and want them styled differently, but in the simplest case:

import streamlit as st

with st.expander('Cat'):
    st.write('Meow' + ' meow'*1000)

css='''
<style>
    [data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
        overflow: scroll;
        height: 400px;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)

image

3

Thanks and it works.
but it will still compress the column space and exceed the border of the expander。
I found a way to fix it.

        hide = """
            <style>
            ul.streamlit-expander {
                overflow: scroll;
                width: 1500px;
            </style>
            """

        st.markdown(hide, unsafe_allow_html=True)
1 Like