St.selectbox title space

Custom Components
1

Hi all,
I’m wondering whether there’s a way to remove part of the height of the select box if I don’t use a title.
so if for example:
select = st.selectbox(“”, [‘a’,‘b’,‘c’])
then streamlit won’t write any title, but it leaves a space above the select box as if there is a title.
I want to delete this space.
Thanks in advanced,
Ori.

2

Hello @ori, Welcome to the Streamlit Community.

You can use the snippet below to ‘push up’ the position of a selectbox:

import streamlit as st


st.info("Select box with no title provided:")
st.markdown(
    """
    <style>
    [data-baseweb="select"] {
        margin-top: -50px;
    }
    </style>
    """,
    unsafe_allow_html=True,
)
select = st.selectbox("", ["1", "2", "3"])

image
image899×177 3.4 KB

The line margin-top: -50px; is the one that forces the selectbox to move up into the title space by specifying negative values for the top margin.

The problem with this approach is that this will apply to every selectbox within your code. Unfortunately, my knowledge of html/css isn’t good enough for me to target a specific selectbox. Maybe you can make that work using this hint.

Cheers.

3 Likes