Multiselect options have truncated names - set width

[kevinlinxc]

I think what I have will require a css hack.

import streamlit as st

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

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.

[blackary]

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"]
)

[edsaac]

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"])

[kevinlinxc]

Went with

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