Changing height&width of st.sidebar.multiselect

[ElmeriVincent]

As you can see in the image i got my multiselect in my sidebar.
How can I change the height and the width so that user doesn’t have to scroll vertically or horizontally.

#user can select specific year and show it's population.
selected_indices = st.sidebar.multiselect('Select the Specific year.', data.index)
selected_rows = data.loc[selected_indices]
st.sidebar.write(selected_rows)

[asehmi]

The sidebar is probably not the best place to display wide tables. You could transpose the table and make the year selection be the columns and the attributes the rows. I’d personally show the table in the main page area.

[R0han]

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.

[ElmeriVincent]

Yeah I figured, but I changed the display. But I will definitely try what you told, maybe not use it on the app but to understand how the <style> is used in streamlit and use it in other ways.
Thanks.