Vertically center the content of columns

🎈 Using Streamlit
1

Hi,

I am playing around with the new layout features. This is amazing, thank you for this update!

However, I was asking myself whether there is some functionality to vertically center the content of some columns.

Here is a small example:

import streamlit as st

col1, col2, col3 = st.beta_columns([3)

with col1:
    st.slider('')
with col2:
    st.checkbox('Checkbox')
with col3:
    st.button('Start')

This produces the following result:

image
image1200×240 7.83 KB

I want to have the slider, the checkbox and the button on the same line. Is that possible?

2 Likes
2

Hi mwinterde,

The hack I found is to pad via empty lines, e.g.:

st.text('')

or

st.markdown('')

Not perfect but it did the trick for me.

Let us know how it goes! :slight_smile:

Charly

3 Likes
3

Hi Charly,

thanks for the reply. This is indeed something that can work for some cases. But in most cases there probably will be still some optical mismatch.

Unfortunately, I have only little knowledge about HTML. But I can imagine that there is some hack using HTML and markdown. I have seen these kind of hacks already multiple times in this forum.

Best wishes,
Marcus

4

Sadly, this functionality is not currently available. The three widgets are currently “top-aligned”; but I agree that visually it doesn’t look super great.

We’d like to get to a place where you can customize the alignment of your widgets. It’s always helpful to hear more about your use cases! (E.g. is there an app that you were trying to align? Where did you expect these to line up?)

2 Likes
5

Hi Austin,

okay, thanks, good to know!

My major use case would be situations as described above. I want to put multiple widgets into one row and want them to be vertically aligned.

So for the example from above, I would expect something like this:

image
image2268×344 32.9 KB

For the meantime, as long as there is no specific streamlit functionality for this use case, could you think about any possible “hack” to overwrite the top-alignment of widgets?

Thanks and best wishes,
Marcus

2 Likes