Change width of sidebar

Using Streamlit
1

Hi there,

I would like to show an image in the sidebar. Like this, the image can be viewed while scrolling through the app.

Can the width of the sidebar be increased such that the complete image is visible in a reasonable size? It is possible to set the width of the image to make it smaller but this makes it difficult to read information from the image.

Any help is very much appreciated!

Cheers, Lili

2 Likes
2

Hi!

I am having the same problem, but I want to print a small table (5 columns) onto the sidebar without scrolling right.

@thiago How can we do it?

Thanks!

3

Hi @lnros . There is currently no official way to set the sidebar width, but if you search the forums you’ll find some hacks people have created.

In the meantime, please follow this feature request I just created so you’re notified if/when we implement this! https://github.com/streamlit/streamlit/issues/2058

1 Like
4

I was able to change the sidebar width this way:

st.markdown(
    f'''
        <style>
            .sidebar .sidebar-content {{
                width: 375px;
            }}
        </style>
    ''',
    unsafe_allow_html=True
)
5

It does work @Larrypc, but it messed up sidebar UI, even after collapsing it, we can still see it.

6

you can modify the width of the expanded sidebar by using the css selector “section[data-testid=“stSidebar”] .css-ng1t4o” and set the width appropriately. The default width is 21rem

st.markdown(f'''
    <style>
    section[data-testid="stSidebar"] .css-ng1t4o {{width: 14rem;}}
    </style>
''',unsafe_allow_html=True)
1 Like
7

This solution worked in dark mode. I’ve made an addition which lets it work in light mode as well:

st.markdown(f'''
    <style>
        section[data-testid="stSidebar"] .css-ng1t4o {{width: 14rem;}}
        section[data-testid="stSidebar"] .css-1d391kg {{width: 14rem;}}
    </style>
''',unsafe_allow_html=True)
3 Likes
8

can we do it for st.selectbox also?