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

bug(cdk): Wrong offset of dragged element on RTL #29604

Closed
1 task done
vladretca opened this issue Aug 18, 2024 · 2 comments · Fixed by #29606
Closed
1 task done

bug(cdk): Wrong offset of dragged element on RTL #29604

vladretca opened this issue Aug 18, 2024 · 2 comments · Fixed by #29606
Assignees
@crisbeto
Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround

Comments

@vladretca
Copy link

vladretca commented Aug 18, 2024 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.2.2

Description

When in RTL mode, and try to drag a element from a list, the element is offset to the right with the length of the screen width

Reproduction

StackBlitz link: https://stackblitz.com/edit/kuk7sb?file=src%2Findex.html
Steps to reproduce:

  1. add dir="rtl" to html tag in index.html
  2. try to drag an element from the list

Expected Behavior

The element should be under the drag start position (mouse) like it was in v17

Actual Behavior

Recording.2024-08-18.143452.mp4

Environment

  • Angular: 18.1.3
  • CDK/Material: 18.1.3
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@vladretca vladretca added the needs triage This issue needs to be triaged by the team label Aug 18, 2024
@crisbeto
Copy link
Member

It looks like this was caused by #28945. I'm still figuring out how we can work around it.

@crisbeto crisbeto self-assigned this Aug 19, 2024
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround area: cdk/drag-drop and removed needs triage This issue needs to be triaged by the team labels Aug 19, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 19, 2024
@crisbeto
fix(cdk/drag-drop): preview positinioned incorrectly when RTL is set …
4eac55a 
…on the body

As of angular#28945 we use a popover to display the preview so that it's always on top. To do so we need to push the popover from its default position at the center to the top/left which is done using `margin: auto`. Since we were setting `margin: 0`, the element was ending up at top/right in RTL, if `dir="rtl"` is set on the `html` or `body`.

These changes fix the issue by pushing the element to the top/left using `margin-right: auto`.

Fixes angular#29604.
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 19, 2024
@crisbeto
fix(cdk/drag-drop): preview positioned incorrectly when RTL is set on…
996f1cf 
… the body

As of angular#28945 we use a popover to display the preview so that it's always on top. To do so we need to push the popover from its default position at the center to the top/left which is done using `margin: auto`. Since we were setting `margin: 0`, the element was ending up at top/right in RTL, if `dir="rtl"` is set on the `html` or `body`.

These changes fix the issue by pushing the element to the top/left using `margin-right: auto`.

Fixes angular#29604.
@crisbeto crisbeto mentioned this issue Aug 19, 2024
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 19, 2024
@crisbeto
fix(cdk/drag-drop): preview positioned incorrectly when RTL is set on…
be785d1 
… the body

As of angular#28945 we use a popover to display the preview so that it's always on top. To do so we need to push the popover from its default position at the center to the top/left which is done using `margin: auto`. Since we were setting `margin: 0`, the element was ending up at top/right in RTL, if `dir="rtl"` is set on the `html` or `body`.

These changes fix the issue by pushing the element to the top/left using `margin-right: auto`.

Fixes angular#29604.
crisbeto added a commit that referenced this issue Aug 20, 2024
@crisbeto
fix(cdk/drag-drop): preview positioned incorrectly when RTL is set on…
3a2d13e 
… the body (#29606)

As of #28945 we use a popover to display the preview so that it's always on top. To do so we need to push the popover from its default position at the center to the top/left which is done using `margin: auto`. Since we were setting `margin: 0`, the element was ending up at top/right in RTL, if `dir="rtl"` is set on the `html` or `body`.

These changes fix the issue by pushing the element to the top/left using `margin-right: auto`.

Fixes #29604.

(cherry picked from commit 04ce4d2)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/drag-drop P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/drag-drop): preview positioned incorrectly when RTL is set on the body crisbeto/material2
2 participants
@crisbeto @vladretca