Horizontally align columns with text and images

[bhammer]

Summary

I have three columns all pulling information from tableauserverclient, one where I write the name of a dashboard, a second with the previous updated date and a third with the preview image of the workbook. When I place these into columns I get everything I need minus the image being gigantic and the dashboard name, updated at being scrunched together. I would like for this information to be aligned so when you read from left to right it flows.

Steps to reproduce

Code snippet:

def display_dashboard_list(dashboards):
    columns = st.columns(3)
    columns[0].write("Dashboard Name:")
    columns[1].write("Last Updated:")
    columns[2].write("Thumbnail:")
    for dashboard in dashboards:
        metadata = get_dashboard_metadata(dashboard.id)
        with columns[0]:
            st.write(f"[{metadata[1]}]({metadata[3]})")
        with columns[1]:
            st.write(metadata[2])
    for image in dashboards:
        thumbnail = get_image_metadata(image.id)
        with columns[2]:         
            if thumbnail:
                st.image(thumbnail[0], use_column_width='auto')
            else:
                st.warning("No thumbnail found for this dashboard.")
        st.write('---')

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

I just need to know how to horizontally align st.write information with st.image across columns please!!

Actual behavior:

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

Debug info

• Streamlit version: 0.88.0
• Python version: 3.6.15
• Jupyter Notebook

Requirements file

streamlit==0.82.0
streamlit-aggrid
pandas==1.5.2
tableau-api
tableauserverclient
TableauServerConnection
sample_config
streamlit-option-menu
Pillow==8.3.1
tableau-api-lib==1.1.1

[Goyo]

Using three columns for each dashboard should work.

[blackary]

Have you tried the different arguments that you can pass to st.columns (e.g. gap, or passing a list of relative column sizes like [2, 2, 1])?

[bhammer]

everything works as expected, just when you read the columns left to right, the dashboard name and last updated information are compacted together and align with the first image where I would like each dashboard name and last updated information to align with the image it references. for example dahsboard1 and updated at align with the top of image1, dahsboard2 and updated at align with the middle of image1, dahsboard3 and updated at align with the bottom of image1 when I expect dahsboard1 and updated at to align with image1, dahsboard2 and updated at to align with image2, dahsboard3 and updated at align with image3, etc…

would it help to post an a screenshot of what is wrong?

[bhammer]

I have tried relative columns with not luck…I can try gap but I believe that places a gap running north to south next to each column where I need a gap east to west under each row of every column so the data is horizontally aligned with each image correctly.

[blackary]

Ah, gotcha. Is this what you’re looking for? You can expand the “show code” to see how it’s done, but each row is a new set of columns

[Goyo]

Yes, I know what the problem is. It happens because you are using the same three columns for all the dashboards. I suggest using three columns for the titles / labels and then three new ones for each dashboard.

Each time you create a new set of columns they are vertically aligned.

[bhammer]

Not quite, I am going to post two images that better depict the current state of my StreamLit and what it should look like in the future. You will see the current state has images that continue down the page where the future state is aligned across the page for each dashboard name. Do you know how to align each dashboard name horizontally to the corresponding image?

Current State:

What I want it to look like:

[bhammer]

Unfortunately I dont know how I could implement this because my dashboards from tableau will be dynamic so I do not want to hard code dashboard names for every row.

[mathcatsand]

Just as you would dynamically add a triple of info to your pre-existing columns with each row, you would instead create a new triple of columns and write to them with each row.

@blackary’s solution does this (creates a set of columns for each row and writes to them). Note that if you are viewing his post on mobile, the example may show the entries wrapped.

If you are looking for something more specific like bottom-aligned, or vertically centered, or setting the height of an element, that’s going to be custom CSS and highly dependent on the types of objects.

[bhammer]

you guys are geniuses!! thank you so much.

[bhammer]

thank you, this ended up working when I played with it for a little longer. Thanks again!!