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.

Sign up for GitHub

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

Jump to bottom

RangeControl style issue in RTL #34855

Closed
stokesman opened this issue Sep 15, 2021 · 0 comments · Fixed by #35777
Closed

RangeControl style issue in RTL #34855

stokesman opened this issue Sep 15, 2021 · 0 comments · Fixed by #35777
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Good First Issue An issue that's suitable for someone looking to contribute for the first time [Status] In Progress Tracking issues with work in progress

Comments

@stokesman
Copy link
Contributor

stokesman commented Sep 15, 2021 •
edited
Loading

Description

While working on #34719, I noticed in RTL languages the "thumb" of our range control component appears to be just a bit offset from where it should be.

Step-by-step reproduction instructions

  1. With WordPress set to an RTL language, interact with a range control and observe the thumb does not center itself on the end of the filled portion of the rail.

Screenshots, screen recording, code snippet

At mid-range (without focus)

LTR RTL
image image

At max (with focus)

LTR RTL
image image

At min (with focus)

LTR RTL
image image

Environment info

Gutenberg: 11.5.0-rc.1
WordPress: 5.8,
Chromium: 92.0.4515.131
macOS: 10.12.6

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@stokesman stokesman added Good First Issue An issue that's suitable for someone looking to contribute for the first time CSS Styling Related to editor and front end styles, CSS-specific issues. labels Sep 15, 2021
@HILAYTRIVEDI HILAYTRIVEDI mentioned this issue Sep 29, 2021
Closed
pbearne added a commit to pbearne/gutenberg that referenced this issue Oct 19, 2021
@pbearne
Fixes WordPress#34855 RangeControl style issue in RTL
38ec3f9
@pbearne pbearne mentioned this issue Oct 19, 2021
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 19, 2021
mirka pushed a commit that referenced this issue Oct 25, 2021
@pbearne
RangeControl: Fix style issue in RTL (#35777)
2bb4e77 
* Fixes #34855 RangeControl style issue in RTL

* addjest the dot offset so it lines up with tool tip

* swapped to using translateX for the adjustment
vcanales pushed a commit that referenced this issue Oct 27, 2021
@pbearne
RangeControl: Fix style issue in RTL (#35777)
77b373b 
* Fixes #34855 RangeControl style issue in RTL

* addjest the dot offset so it lines up with tool tip

* swapped to using translateX for the adjustment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. Good First Issue An issue that's suitable for someone looking to contribute for the first time [Status] In Progress Tracking issues with work in progress
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes #34855 RangeControl style issue in RTL pbearne/gutenberg
1 participant
@stokesman