Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent layout shift caused by scrollbars #8504

Open
2 tasks done
gabrieltempass opened this issue Apr 15, 2024 · 2 comments
Open
2 tasks done

Prevent layout shift caused by scrollbars #8504

gabrieltempass opened this issue Apr 15, 2024 · 2 comments
Labels
area:ux/ui type:enhancement Requests for feature enhancements or new features

Comments

@gabrieltempass
Copy link

gabrieltempass commented Apr 15, 2024

Checklist

  • I have searched the existing issues for similar feature requests.
  • I added a descriptive title and summary to this issue.

Summary

When the content overflows the page and the scrollbar shows up, the content is pushed to the left. Conversely, when the scrollbar disappears, the content is pushed back to the right. Here is an example of the problem:

import streamlit as st


def write_lorem_ipsum():
    st.write(
        """
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget
        nisi quis augue suscipit tincidunt. Curabitur dignissim tristique ante,
        vitae malesuada augue blandit eget. Duis ullamcorper sit amet augue a
        viverra. Donec orci metus, euismod sit amet pharetra ut, venenatis id
        turpis. Nam scelerisque diam elit, eget sollicitudin ex blandit et. In
        sed quam non massa hendrerit porttitor. Sed vulputate tincidunt
        pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et
        ultrices posuere cubilia curae; Nunc vehicula ac justo in rhoncus.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia curae; Donec nec venenatis elit. Praesent quis
        vulputate nulla, ut dapibus eros. Praesent aliquet leo est, vestibulum
        viverra libero maximus in. Integer eu sollicitudin turpis, quis euismod
        magna.
        """
    )

write_lorem_ipsum()

if st.checkbox("Show more content"):
    write_lorem_ipsum()

Kapture 2024-04-15 at 15 05 04

And the expected behavior:

Kapture 2024-04-15 at 15 51 24

Why?

When the content moves from left to right it makes the web app look bad and unprofessional.

How?

There are several ways to avoid this behavior, some better than others, here are a few of them:
https://dev.to/rashidshamloo/preventing-the-layout-shift-caused-by-scrollbars-2flp

Additional Context

No response

@gabrieltempass gabrieltempass added the type:enhancement Requests for feature enhancements or new features label Apr 15, 2024
Copy link

To help Streamlit prioritize this feature, react with a 👍 (thumbs up emoji) to the initial post.

Your vote helps us identify which enhancements matter most to our users.

Visits

gabrieltempass added a commit to gabrieltempass/abtester that referenced this issue Apr 15, 2024
@jrieke
Copy link
Collaborator

jrieke commented Apr 16, 2024

Especially in the sidebar, this is also pretty annoying because the width is smaller, so it's more noticeable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:ux/ui type:enhancement Requests for feature enhancements or new features
Projects
None yet
Development

No branches or pull requests

3 participants