Overlap of buttons on the same line (multiple columns)

[Rima]

Hello,
I have a list of dynamic number of buttons to be put in columns. (If I have 10 buttons, I will have 10 columns).

It seems that the button can take a width bigger than the width of the column it self. How can I fix that?
Ideally it would be better to increase the height of the button instead of its width.
(I changed the string in each column by the number of characters for security reasons).

code:

nb_buttons = 10
cols_info_c = st.columns(nb_buttons)
for col in cols_info_c:
     col = st.empty()
for index, button_name in enumerate(list_button_names):
     cols_info_c[index].button(
            button_name,
            on_click=some_function,
            args=(button_name,),
        )

[Caroline]

Hi @Rima,

Thanks for posting!

Can you share a code snippet that corresponds to the screenshot you’ve shared?

Caroline

[Rima]

Hello Caroline,

Thanks for the reply, I just added the code in the question

[willhuang]

Hi @Rima , it looks like you want to dynamically put buttons into columns.

What you could do is set the page config to be the wide layout and thus u get more space to work with:

st.set_page_config(layout="wide")

However, if that’s not enough, maybe you can do a few rows of x amount columns?
something like:

#function which split the list into two halves
def splitlist(inputlist,n):

  first_half=inputlist[:n]
  sec_half=inputlist[n:]

  return first_half,sec_half

nb_buttons = 10
cols_info_c_0 = st.columns(nb_buttons / 2)
cols_info_c_1 = st.columns(nb_buttons / 2 + (nb_buttons%2)) # add 1 if odd 
for col in cols_info_c_0:
     col = st.empty()
for col in cols_info_c_1:
     col = st.empty()
first_half, sec_half = splitlist(list_button_names, len(list_button_names))
for index, button_name in enumerate(first_half):
     cols_info_c0[index].button(
            button_name,
            on_click=some_function,
            args=(button_name,),
        )
for index, button_name in enumerate(sec_half):
     cols_info_c1[index].button(
            button_name,
            on_click=some_function,
            args=(button_name,),
        )

Let me know if this helps.

[Rima]

Hello @willhuang , thank you for your answer. I implemented a similar method to yours (instead of having dynamic number of columns according to the number of buttons) I specificied a maximum number of columns in each “line”. But the problem persists.

To clarify, the problem is a UI bug, since the button depends on the resolution of the page (and the screen). If the page is too small, buttons will overlap, if the page is maximized, the buttons will be perfect and far from each other.