question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to set sidebar width

See original GitHub issue

Source: https://discuss.streamlit.io/t/change-width-of-sidebar/5339/2

User would like to change the width of the st.sidebar.

Need to figure out (1) whether/when to implement this, and (2) what should the API be.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:28
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

31reactions
EcosystemEnergycommented, Apr 9, 2021

@jrieke I’m sharing your solution here, it’s been working great for me.

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

Hi!

I am writing seeing this got closed after enabling the user to resize the sidebar.

I would like to have the ability to resize programatically the sidebar, or at least be able to provide a default value. For instance when using iframes or https://github.com/andfanilo/streamlit-drawable-canvas , they get cut off and the user has to manually resize the sidebar in order to see everything.

Is having sidebar size configurable still in the work? Otherwise, should I open a different issue than this one?

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Sidebar - Every Layout
The sidebar width is marked as n. The width of the accompanying element is all. The .sidebar element is still technically allowed to...
Read more >
How to create a fixed width sidebar and full width content
You can do this using display: table; on the containing div and then display: table-cell; on the inner divs. You can then apply...
Read more >
Fixed width sidebar in responsive design
I have chosen a width of 320px for our sidebar. If you choose any other size then do make sure to change the...
Read more >
Changing the Width of the Divi Sidebar
Set the "Sidebar Width" option to your desired width (as a percentage of the content width, which is 1080px by default); (Optional) Change...
Read more >
How to Create a Resizable Left Navigation - Solodev
Then we give a default width for the sidebar by setting its width to 200px . Feel free to change the width value...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found