Format the selectbox to have multiline text

Using Streamlit
,
1

Is there a way to format a selectbox options so that long text spans multiple lines instead of being truncated?

I have managed to create a bit of a lackluster hack that works sometimes by manipulating some css, but cells starts overlapping when text gets longer (as seen in screenshot).

Screen Shot 2024-07-09 at 10.25.41 AM
Screen Shot 2024-07-09 at 10.25.41 AM910×778 54.3 KB

This is my sample project

    # Define the items with varying lengths
    with open( "./style.css" ) as css:
        st.markdown( f'<style>{css.read()}</style>' , unsafe_allow_html= True)
    items = [
        "Short item 1",
        "This is a longer item that might take up more than one line",
        "Short item 2",
        "Another short item",
        "A very very long item that definitely should wrap around to multiple lines in the selectbox. Like it's so long that if you were to put it in a list, it would probably break the layout of the page. But it's okay because the selectbox is designed to handle this kind of thing.",
        "Short item 3",
        "Medium length item for variety",
        "Short item 4",
        "A somewhat long item that might or might not wrap to the next line",
        "Another long item that should wrap around and demonstrate how selectbox handles text overflow",
        "Short item 5",
        "Yet another item of medium length to balance the options",
        "Short item 6",
        "Short item 7",
        "The final item which is also quite long to see how it looks at the end of the selectbox"
    ]

    # Create a selectbox with the items
    selected_item = st.selectbox("Select an item:", items)

    # Display the selected item
    st.write(f"You selected: {selected_item}")

And this is my css:

ul {
    list-style-type: none !important;
    padding: 0;
    margin: 0;
    width: 100%;
}
.list-item {
    position: relative !important; /* Use relative positioning to prevent overlapping */
    width: 100% !important;
    padding: 10px 0 !important; /* Add some padding for better spacing */
    box-sizing: border-box !important; /* Ensure padding is included in the width calculation */
    display: flex !important; /* Use flexbox to handle child alignment */
    align-items: flex-start !important; /* Align items to the start to allow for varying heights */
    flex-direction: column !important; /* Ensure the content stacks vertically */
    height: auto !important; /* Ensure height is auto-adjusted */
    min-height: auto !important; /* Ensure min-height is also auto-adjusted */
}

.tooltip-hover-target {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important; /* Ensure it takes full width */
}

.st-emotion-cache-87mhkc.e1gc5fo22 {
    flex: 1 !important; /* Allow the container to take up available space */
    height: auto !important; /* Ensure height is auto-adjusted */
}

.st-emotion-cache-sy3zga.e1gc5fo21 {
    white-space: normal !important; /* Allow text to wrap to the next line */
    word-wrap: break-word !important; /* Break long words to fit within the container */
    overflow: visible !important; /* Ensure overflow content is visible */
    line-height: 1.5 !important; /* Improve readability with adequate line spacing */
    height: auto !important; /* Ensure height is auto-adjusted */
    font-size: 0.75em !important; /* 14px/16=0.875em */
}

Definitely a hacky and incomplete solution… Hopefully the community can cook up something more elegant :slight_smile: Thanks!