How can I make my dividers per row a consistent size?

Summary

Hello! I’m struggling to find a solution that allows my streamlit application to have clean, and consistent, dividers per row. The way I’m formatting the UI is pushing the dividers lower because of name size. I’m aiming for a consistent size without having to abbreviate the names. Attached below is the function where I’m having this issue. See pictures for examples.

Steps to reproduce

Code snippet:

def output_results_columns(filtered_df):
    col1, col2, col3, col4 = st.columns(4)
    
    with col1:
        col1container = st.container()
    with col2:
        col2container = st.container()
    with col3:
        col3container = st.container()
    with col4:
        col4container = st.container()
    
    curr_col_count = 0

    for _, row in filtered_df.iterrows():
        # Choose the container based on the current column count
        if curr_col_count == 0:
            container = col1container
        elif curr_col_count == 1:
            container = col2container
        elif curr_col_count == 2:
            container = col3container
        else:
            container = col4container
        with container:
            innercol1, innercol2 = st.columns([0.25, 0.75])
            with innercol1:
                if row["profile_pic"] == "N/A":
                    st.image("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png")
                else:
                    st.image(row['profile_pic'], use_column_width = "auto")
            with innercol2:
                st.write(f"{row['full_name']} ({row['party'][0]})")
                st.caption(f"{row['state_name']} | {row['district_value']}")
            st.divider()
        # Update the current column count
        curr_col_count += 1
        if curr_col_count == 4:
            curr_col_count = 0

Expected behavior:

Actual behavior:

I would generate a set of columns for each row, insert the divider, and then create a new set of columns.

import streamlit as st

list_employees = [f"http://placekitten.com/g/200/{100+10*i}" for i in range(10)]

NCOLS = 4
NEMPLOYEES = len(list_employees)

chunks = [list_employees[i : i + NCOLS] for i in range(0, NEMPLOYEES, NCOLS)]

for chunk in chunks:
    cols = st.columns(NCOLS)
    for col, employee in zip(cols, chunk):
        with col:
            st.image(employee, use_column_width=True)
            st.caption("Mew")
    st.divider()

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