Fix dataframe scrollbars by using negative padding #7090
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
sfc-gh-wihuang
approved these changes
Oct 10, 2023
eric-skydio
pushed a commit
to eric-skydio/streamlit
that referenced
this pull request
Dec 20, 2023
* Add negative padding to allow scrollbar overlay * Change from overlay to auto * Add some debugging stuff * Some more tweaks * Only apply negative padding for webkit browsers * Change back previous defaults * Remove unused imports * Improve implementation * Use effect for scroll check * Improve implementation * Improve implementation * Improve scroll determination * Improvements to scrolling logic * Remove logging * Improve fix logic * Add additional pixel * Remove outdated snapshots * Update test to cover scrolling * Rename * Fix tests * Improvements * Update snapshots * Move snapshots * Add comments
zyxue
pushed a commit
to zyxue/streamlit
that referenced
this pull request
Mar 22, 2024
* Add negative padding to allow scrollbar overlay * Change from overlay to auto * Add some debugging stuff * Some more tweaks * Only apply negative padding for webkit browsers * Change back previous defaults * Remove unused imports * Improve implementation * Use effect for scroll check * Improve implementation * Improve implementation * Improve scroll determination * Improvements to scrolling logic * Remove logging * Improve fix logic * Add additional pixel * Remove outdated snapshots * Update test to cover scrolling * Rename * Fix tests * Improvements * Update snapshots * Move snapshots * Add comments
zyxue
pushed a commit
to zyxue/streamlit
that referenced
this pull request
Apr 16, 2024
* Add negative padding to allow scrollbar overlay * Change from overlay to auto * Add some debugging stuff * Some more tweaks * Only apply negative padding for webkit browsers * Change back previous defaults * Remove unused imports * Improve implementation * Use effect for scroll check * Improve implementation * Improve implementation * Improve scroll determination * Improvements to scrolling logic * Remove logging * Improve fix logic * Add additional pixel * Remove outdated snapshots * Update test to cover scrolling * Rename * Fix tests * Improvements * Update snapshots * Move snapshots * Add comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
As described here, a recent chrome update changed the behavior of the
overflow: overlayCSS setting. This means we can no longer enforce an overlaying scrollbar with our style settings. We use this forst.dataframe, but it's now adding a white border for the scrollbar gutter.The solution here is to ignore the custom styles for the dataframe scroll area. We need to apply this in our global CSS settings, since once it is applied it doesn't seem that it can be unset.
Current version:
Screen.Recording.2023-06-22.at.21.34.34.mov
Fixed version:
Screen.Recording.2023-10-10.at.15.16.13.mov
GitHub Issue Link (if applicable)
Closes: #6888
Testing Plan
We are not currently testing the scrollbar behavior, and this would be quite hard to do since it really depends on the OS, browser, and interactive usage. But I added/updated e2e tests to check dataframes with scroll areas if they are rendered correctly.
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.