I am using a st.markdown
to display custom color for the multiselect
tags. However, I noticed that I have extra whitespace created(vertical) between two multiselect
options.
below is the code I am using.
import streamlit as st
st.set_page_config(layout="wide", page_title="Police Report Triaging")
st.subheader("Key information")
col3, col4 = st.columns([0.5,2.5])
person_list = ['Victim','Accused','Suspect','Witness']
for person in person_list:
st.markdown(
f"""
<style>
span[data-baseweb="tag"]:has(span[title="{person}"]) {{
background-color: #1E90FF !important;
}}
</style>
""",
unsafe_allow_html=True,
)
with col3:
st.multiselect(
label="Person",
default = ["Victim"],
options= person_list
)
with col4:
st.markdown('#')
st.write("**Name**: Samuel")
col5, col6 = st.columns([0.5,2.5])
with col5:
st.multiselect(
label="Person",
default = ["Accused"],
options= person_list
)
with col6:
st.markdown('#')
st.write("**Name**: Bob")
I am not sure how to reduce the extra empty whitespaces.
Markdown with no visible content such as your CSS (<style>...</style>
) will create whitespace. Your col3
and col4
are initialized first, then you write your CSS to the main body which goes under your columns. Hence, that first row shows first, then the whitespace (CSS), followed by the next row since col5
and col6
are initialized next.
The easiest solution is to make sure any "invisible markdown" elements are the last thing put on your page instead of mixed into the middle. This will make the bit of extra whitespace much less noticeable. This is what I usually recommend and is sufficient in many use cases.
If you have the need to truly have more control and mix in 0-height lines, you can set the height when rendering it on the page via st.components.v1.html
. The caveat here is that although the HTML element will be 0 height, the gap between elements will cause the appearance of a double gap. (e.g. something visible, a gap, something 0-height, a gap, something visible)
This height issue is currently tracked in GitHub and I've written a JavaScript solution to get around it here: https://github.com/streamlit/streamlit/issues/6605#issuecomment-1530232607