Multiselect options have truncated names - set width

🎈 Using Streamlit
1

I think what I have will require a css hack.

import streamlit as st

st.multiselect("pick a long string", ["AAAAAAAAAAAAAAAAAAAAA", "BBBBBBBBBBBBBBBBBBBBBBBBB"])

image
image835×200 1.96 KB

As you can see, the strings get truncated at a fixed width when displayed inside the multiselect box, and I’m wondering if I could choose this width for myself, or choose to show the whole string.

2

You are correct that a CSS hack is probably the only way to accomplish this currently.

import streamlit as st

width = st.number_input("Width", 0, 300, 128)

st.markdown(
    f"""
    <style>
        .st-e4 {{
            max-width: {width}px
        }}
    </style>""",
    unsafe_allow_html=True,
)

st.multiselect(
    "pick a long string", ["AAAAAAAAAAAAAAAAAAAAA", "BBBBBBBBBBBBBBBBBBBBBBBBB"]
)
3

I’ll just add that the font-size could also be modified to fit more in the label.

import streamlit as st

st.markdown("""
    <style>
        .stMultiSelect [data-baseweb=select] span{
            max-width: 250px;
            font-size: 0.6rem;
        }
    </style>
    """, unsafe_allow_html=True)

st.multiselect("pick a long string", 
    [i*25 for i in "ABCDEWXYZ"])

image
image841×229 6.46 KB

1 Like
4

Went with

.stMultiSelect [data-baseweb=select] span{
    max-width: 500px;
}
1 Like