Remove or reduce spaces between elements

🎈 Using Streamlit
, ,
#1

Hi,

I am displaying a set of checkboxes which are all listed in one col:

button_col, _= st.columns([1, 10])

with button_col:
    st.checkbox("text")
    st.checkbox("text1")
    st.checkbox("text2")

as you can see the checkboxes have vertical .spaces in between.

Unbenannt

I wanted to know, if there is a way to remove or reduce the spaces somehow.

2 Likes
#3

I would also be very interested in a solution to reduce the white space between elements. Is there any solution yet?

#4

Here is an idea combining css selectors to modify the gap property of the first column.

image
image913×591 59.2 KB 

import streamlit as st

button_col, other_col= st.columns([1,3])

st.markdown("""
    <style>
    [data-testid=column]:nth-of-type(1) [data-testid=stVerticalBlock]{
        gap: 0rem;
    }
    </style>
    """,unsafe_allow_html=True)

with button_col:
    "*Modified gap:*"
    st.checkbox("text")
    st.checkbox("text1")
    st.checkbox("text2")

with other_col:
    "*Unmodified gap:*"
    st.checkbox("text4")
    st.checkbox("text5")
    st.checkbox("text6")

st.markdown("## A header")
st.markdown("🪄 This is a repeated sentence"*100)
1 Like
#5

Thank you very much @edsaac!
This works, but can you exlain a bit how this works. I am not familiar with CSS…

How could I implement this for a st.selectbox?

#6

Sure, so this changes the gap between elements in the first column to 0rem. The logic behind it is that it looks for all the column elements in the page ([data-testid=column]), then picks the first one (:nth-of-type() selector), and then it selects the [data-testid=stVerticalBlock] element, which is the one that has the gap property. Notice that gap: 0rem does not apply to the checkboxes but to everything placed in that first column, so it should apply for selectboxes or whatever you put in there.

Here is a better explanation on how to find those tags and target particular css properties on an page:

1 Like
#7

Can we get this as a feature on the checkbox widget somehow? The current spacing between checkboxes looks too large:
image