Align Columns Height

[sridharr]

Hi Team,

Below is the example of st.columns options. using that three cols were created and images were added but the height of the images are different. Is there a way to align the column height.

This is not looking nice right… kindly suggest me a way forward. either my style or by streamlit code.

[asehmi]

Try using streamlit-elements.

[Shawn_Pereira]

Hi @sridharr , someone had attempted this before. See if this link helps you:

Grid of images with the same height?

Hi! I’m working on a book recommendation system based on a LDA model and want to show the book options on one page. Right now I’m using st.image() and passing the list of images which comes from a column in the dataframe, and it looks like this: st.image(filteredImages, width=150, caption=caption) [Screen Shot 2021-03-10 at 1.13.59 PM] I’m able to set the width but not the height, so all of them have different heights. I tried using the pillow library to resize each image but the run time in…

Cheers

[sridharr]

@Shawn_Pereira Thanks for the reply. In quoted case, images are in columns but suppose i want one column as image and another columns as dataframe or table then how should we maintain the same column height.

[Shawn_Pereira]

You would probably need use AG grid and set the height to the height of your picture. Regardless, you may need to resize your pictures so that they are of the same height.

Cheers

[sridharr]

Hi,

Can you give some coding examples from your experience.

[Shawn_Pereira]

Here are some links you can go through:

Ag-Grid component with input support

Oh you are right, my fault. I found that images work too!!! This an example of the incredible potential of streamlit+aggrid [image]

Ag-Grid component with input support

All these features are already possible using JSCode: Clickable URL put the URL in one of the fields: link_jscode = JsCode(""" function(params) { var element = document.createElement("span"); var linkElement = document.createElement("a"); var linkText = document.createTextNode(params.value); link_url = params.value; linkElement.appendChild(linkText); linkText.title = params.value; linkElement.href = link_url; linkElement.target = "_blank"; element.appendChild(l…

In fact, go through the entire trail of AG grid - there’s lots to learn. There are some examples on the GitHub site too.

Cheers