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

fix(cdk/drag-drop): preview positioned incorrectly when RTL is set on the body #29606

Merged
merged 1 commit into from
Aug 20, 2024

Conversation

crisbeto
Copy link
Member

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.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Aug 19, 2024
@crisbeto crisbeto requested a review from a team as a code owner August 19, 2024 12:09
@crisbeto crisbeto requested review from mmalerba and wagnermaciel and removed request for a team August 19, 2024 12:09
… 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 added the action: merge The PR is ready for merge by the caretaker label Aug 20, 2024
@crisbeto crisbeto merged commit 04ce4d2 into angular:main Aug 20, 2024
21 of 23 checks passed
crisbeto added a commit that referenced this pull request Aug 20, 2024
… 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.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(cdk): Wrong offset of dragged element on RTL
2 participants