react-scrollbars-custom
react-scrollbars-custom copied to clipboard
xobotyi
Width calculation bug
Hi,
If you update LIVE DEMO to latest package version 4.0.5 you will see that text is not fully visible. Here is the live exmple https://codesandbox.io/s/rsc-live-example-h34of
This bug is most probably caused by the change from padding: 0.05 to display: table-cell in this commit https://github.com/xobotyi/react-scrollbars-custom/commit/7c2d3b83429d2ed74d696a4e03ead5ae01fb172b
What for i've written an issue example?🤦♂️
@jmarceli Everything is good for me. What browser do you use?
HI, I'm using Google Chrome Version 75.0.3770.90 (Official Build) (64-bit) on Max OS X Mojave and it looks like this:
@jmarceli ~~Cause there is no possible way for me to test it on macos - check this one pls. https://codesandbox.io/s/rsc-live-example-062ls~~
Have you added sizes translation? Cause without that field enabled display:table-cell shouldn't appear, if translation disabled it still uses padding: .05
Hi, when I use translateContentSizesToHolder={false} it doesn't change anything besides padding: 0.05px, but it still looks not as I expect.
I will try to find a way to make it look ok and then I will add a solution to that issue (as soon as I will have some spare time).
Very weird... Looks like the scrollbar width compensation is turned off =/ Because there is no other reason to content to leak under the scrollbar. Are scrollbars overlay the content/scroller element?
No, it's not the compensation. When I remove/hide scrollbar with CSS display: none the content still falls behind the right edge of the scrolling area.
Thus a have absolutely no clue what is going on...
Try to manually set the left style to 0 for the scroller element and ensure that native scrollbar is still there.
It seems to be still an issue. I've checked demo page https://xobotyi.github.io/react-scrollbars-custom/ and it looks like this:
This is taken from Chrome Version 76.0.3809.132 on Mac OS X 10.14, but to be honest I'm no longer tracking this issue as I've changed scrollbars library (sorry).
https://github.com/KingSora/OverlayScrollbars with react adapter https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react while it is not perfectly documented I manage to make it work pretty well for my project.
Good day!
I want to contribute to this bug. This bug isn't platform specific but happens if the browser has already overlaid scrollbars (e.g. the native scrollbar-width is 0). You can simulate this behavior on any system with chrome. Go to chrome://flags/ and enable the option 'Overlay Scrollbars':
To provide a clue on why this is happening:
Your compensation strategy with margin-right: -20px and padding-right: 20px isn't working if the horizontal axis is overflowing.
@jmarceli I'm the author of OverlayScrollbars and I'm glad the plugin is working for you. May I ask you how I could improve the documentation? In my eyes I've done a pretty good job with it, but maybe there are certain thing which are too hidden for new users like you was. Thanks for your input!
@KingSora I think I have a similar issue (using your lib with React). I have a grid layout with a column template auto 1fr auto. My scrollable element is in the middle. Inside the scrollable element, I have expansion panels each having number of cards. When all panels are collapsed, the element width is good. Here is a picture:
Now, if I expand the last panel which fits in the viewport (not causing overflow), width increases for some reason. Here is a picture (notice how third column is clipped):
And if I expand two panels, there is enough content to cause overflow, everything is ok. Here is a picture:
Any ideas why is this happening?
@vdjurdjevic please open a issue in my repo for this case, I don't really wanna spam someone others issues with unrelated stuff to his project.