Buttons Alignment

[Aryan_Gupta]

So I want to create 2 buttons in a column, the first one for choosing attachments and the second one for folders, but theirs a huge gap between the two, how can I make it evenly closer to each other?

col1, col2 = st.columns([1,1])  # Adjust column ratios as needed

with col1:
    if st.button("Button 1"):
        st.write("Button 1 clicked")

with col2:
    if st.button("Button 2"):
        st.write("Button 2 clicked")

Just an example snippet

[Shawn_Pereira]

Hi @Aryan_Gupta, just revise your first line to:

col1, col2, col3 = st.columns([1, 1, 10])

Adjust the value of the 3rd parameter (i.e. 10) as needed for the best display.

Cheers

[CarlosSerrano]

Hi @Aryan_Gupta ,

You can either create a third empty column like @Shawn_Pereira suggested, which is my usual method. Or you can use the “use_container_width = True” attribute on the button to make them fill the screen .

col1, col2 = st.columns([1,1])  # Adjust column ratios as needed

with col1:
    if st.button("Button 1", use_container_width=True):
        st.write("Button 1 clicked")

with col2:
    if st.button("Button 2", use_container_width=True):
        st.write("Button 2 clicked")

[Aryan_Gupta]

I want both of them on the left side, together

[CarlosSerrano]

Using Shawn’s solution will be the best for your intended use.

[Aryan_Gupta]

And if I want another button in the same row, but on the extreme right side. Then?

[CarlosSerrano]

You will need to play with your st.columns array. For example:

#This will produce 4 columns, with the 3rd column being 10 times larger than the rest. 
columns = st.columns((1,1,10,1))

with columns[0]:
    st.button("Button 1", use_container_width=True)
with columns[1]:
    st.button("Button 2", use_container_width=True)
# No usage of 3rd position on the columns.
with columns[3]:
    st.button("Button 3", use_container_width=True) #<- Button on the right

Cheers

[ji_haoran]

You can try sac.buttons with set align parameter,it may help.