How to horizontally align 2 objects in a single `st.column`?

Using Streamlit
1

There has got to be a simple way to show two items, side-by-side, in a single st.column. I just can’t figure it out!

Snippet:

if json_content:  
                    json_data = json.loads(json_content)  
                    feedback = {}  
  
                    for key, value in json_data.items():  
                        col3, col4, col5 = st.columns(3)  
                        with col3:  
                            st.markdown(f"**{key}**:")  
                        with col4:  
                            st.markdown(f"{value}")  
                        with col5:  
                          thumbs_down_key = f"thumbs_down_{key}"  
                          thumbs_up_key = f"thumbs_up_{key}"  
                            
                          thumbs_down_button = st.button("👎", thumbs_down_key)  
                          thumbs_up_button = st.button("👍", thumbs_up_key)

Can someone assist?

Thank you!

2

Hey @ericOnline Welcome to the community!

In terms of aligning the two items side by side. The key question would be how do you want the alignment.

Based on the code, I see three columns created for everything in the json_data, so it looks like you are showing them side by side.

You can adjust the columns. Our columns docs offer multiple ways to take up space. Here you can provide weighted values, so if you want column 5 to have the buttons side by side, you can do the following:

col3, col4, col5, col6 = st.columns([2, 2, 1, 1]) # Note the change  in spec
with col3:  
    st.markdown(f"**{key}**:")  
with col4:  
    st.markdown(f"{value}")  
with col5:  
    thumbs_down_key = f"thumbs_down_{key}" 
    thumbs_down_button = st.button("👎", thumbs_down_key)  
with col6:
    thumbs_up_key = f"thumbs_up_{key}"  
    thumbs_up_button = st.button("👍", thumbs_up_key)

This should get us closer to having col 5 and 6 be arbout the same size. You can also add use_container_width=True to the button to make it look cleaner.

Hope that helps!

3

Thank you very much for your expertise.

I’m going to study the [2, 2, 1, 1] parameter…This is a great example.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.