Multiple download buttons on the same line

🎈 Using Streamlit
1

I produced a few tables in Streamlit and would like to show the download buttons for this table in various formats underneath it. This is working as intended, the only problem I have is that the buttons are shown below each other.

I am aware that this was a topic before (for instance here), the problem of this approach (with separate columns) is that the gap depends on the size of the screen/window.

Is there by now a possibility to show the buttons directly next to each other without having to rely on columns (or with columns, if it serves the purpose)? I am also open to other solutions of course :slight_smile:

Thank you!

2

Hey @johanneswerner,

You can use square brackets to define the width of the columns so that the gap is smaller: left, right = st.columns([.5,1])

2 Likes
3

Dear @Caroline

thank you for your reply. If I understand correctly, then the gap would be different depending if I look at the streamlit app on a mobile device or a wide screen. How can I ensure that the buttons (in my case three or four depending on the table) are aligned to the left with a small gap in-between (regardless of the window size)?

4

Does anyone have an idea on how to deal with that issue? Is it possible to modify the buttons after creation with CSS?

5

Hi All,

If you’re like me, it might bother you that the columns equally space, making layout not visually appealing because the buttons appear far apart.

After a lot of CSS digging, I found a pretty simple approach that doesn’t require any other library installs. After creating the columns as show above, it is possible (at least for the current version of streamlit) to apply the following CSS to make columns only as wide as the button. I included this at the top of my file:

st.markdown("""
            <style>
                div[data-testid="column"] {
                    width: fit-content !important;
                    flex: unset;
                }
                div[data-testid="column"] * {
                    width: fit-content !important;
                }
            </style>
            """, unsafe_allow_html=True)

And then (for my use case):

col1, col2, col3 = st.columns([1,1,1])
    with col1:
        st.button(...)
    with col2:
        st.button(...)
    with col3:
        st.download_button(...)