You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
importstreamlitasstdefwrite_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()
ifst.checkbox("Show more content"):
write_lorem_ipsum()
And the expected behavior:
Why?
When the content moves from left to right it makes the web app look bad and unprofessional.
Checklist
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:
And the expected behavior:
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
The text was updated successfully, but these errors were encountered: