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

Thumb is not working well in RTL #157

Open
sm2017 opened this issue Aug 26, 2020 · 3 comments
Open

Thumb is not working well in RTL #157

sm2017 opened this issue Aug 26, 2020 · 3 comments

Comments

@sm2017
Copy link

sm2017 commented Aug 26, 2020

What is the current behavior?

Thumb has wrong position on RTL

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:

https://codesandbox.io/s/rsc-live-example-forked-s8ib9?file=/src/RSCExample.jsx

What is the expected behavior?

if you edit /public/index.html and replace <body dir='rtl'> with <body> you can see scroll thumb works well , but in RTL mode its out of visible view

A little about versions:

  • OS: No matter , but I use windows 10
  • Browser (vendor and version): Version 84.0.4147.135 (Official Build) (64-bit)
  • React: 16.13.1
  • react-scrollbars-custom: 4.0.25
  • Did this worked in the previous package version? I don't know!
@sm2017
Copy link
Author

sm2017 commented Aug 26, 2020

@xobotyi I think if you negate thumbOffset in rtl mode in translateX(${thumbOffset}px) it's fixed

this.thumbXElement.style.transform = `translateX(${thumbOffset}px)`;

@sm2017
Copy link
Author

sm2017 commented Aug 26, 2020

I negate thumbOffset but it fixed partially

@sm2017
Copy link
Author

sm2017 commented Aug 31, 2020

@xobotyi Can you please take a look?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant