Changing height&width of st.sidebar.multiselect

🎈 Using Streamlit
3

I agree with @asehmi on this one. but, if you still want to proceed, the following snippet will do it

Expanded sidebar

st.markdown(
    """
    <style>
    [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
        width: 800px;
    }
    [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
        width: 500px;
        margin-left: -500px;
    }
    </style>
    """,
    unsafe_allow_html=True,
    )

Back to Normal

st.markdown(
     """
     <style>
     [data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
         width: 450px;
       }
       [data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
           width: 500px;
           margin-left: -500px;
        }
        </style>
        """,
        unsafe_allow_html=True)

Use this in a conditional approach, when you expand your sidebar this way it remains extended until it encounters the same styling snippet again.

P.S: I don’t own the code, I used the same for my application, I remember taking this snippet from a GitHub thread.

Cheers!
Rohan.