Remove or reduce spaces between elements

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

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

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

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

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?

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

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