Two buttons on the same line

Is there any way to put two buttons together on the same line? Currently they will appear after each other. Thanks!

2 Likes

Hi @joewandy, welcome to the forums :slight_smile:

It’s currently not possible, team is thinking about horizontal/grid layout it on this post Customizable Layout for Streamlit if you want to share, and it’s pretty high in the roadmap.

If you feel Javascript adventurous though, custom components are being developed right now and when the feature drops in Streamlit you could also build your own custom component with two aligned buttons :wink: .

Regards,
Fanilo

3 Likes

Hello, it is now solved with the newly updated features from streamlit.

It is possible to do that with (beta_columns) feature

1 Like

Thanks @arwa! Is there anyway to have the buttons appear right next to each other (without the gap introduced by columns)?

@pomkos, use square brackets to define the width of the columns to shrink the gap:

col1, col2 = st.beta_columns([.5,1])

This results in col1 being half the width of col2

6 Likes

Thanks @stazy, that’s a great tip!

1 Like