St.button in one line

🎈 Using Streamlit
1

hi, I have a question.
I want to make 3 or more buttons in one line in streamlit.
I know we can use st.columns; but the problem with this solution is when I want to show another part of step.
in fact in the following steps I had to use columns again and it doesn’t work column in column.
so I need another idea for putting buttons in one line and for the next step use all of the workspaces of streamlit.
my goal is to put the buttons in one line such as an application and when the user clicks on it, the solution was shown in all of the streamlit workspace not only in the space of that column.
is it possible?
thanks for your help.

2

Sounds like you’re creating a menu of sorts. Try streamlit-option-menu.

P.S. There will be a new feature announced today that you might be able to use. Look out for the announcement.

2 Likes
3

my goal is to put the buttons in one line such as an application and when the user clicks on it, the solution was shown in all of the streamlit workspace not only in the space of that column.
is it possible?

I think that this can solve your problem:

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    button1 = st.button('Button 1')

with col2:
    button2 = st.button('Button 2')

with col3:
    button3 = st.button('Button 3')

if button1:
    # Do something...

if button2:
    # Do something...

if button3:
    # Do something...

The 3 buttons are in the same line and when you press one of them the solution will be shown in the entire workspace, not only in the space defined by the button’s column.

1 Like
4

thanks for your help
it works!!

5

It worked perfectly.
Thanks @Tiago_Coutinho

6

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(...)
2 Likes