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(...)
1 Like
6

This is great, Branden.

Do you know if it possible to specify which columns this applys to?

I want it to apply to the columns that include buttons but not unrelated columns further down in the application.

Appreciate the help!

2 Likes
7

Hey Dominick,

Sorry to disappoint - I think it’s all or nothing. When the columns are generated by Streamlit, there does not seem to be a way to control the CSS that is applied to them. The only way this would be possible is if st.columns allowed the user to pass a class name or some other HTML property, but I doubt that’s possible.

Thanks,
Branden

8

As a side note - if it is possible to put your other content on another page of a multi-page application. You could apply this column hack to one page but not the other.