angular / angular/components

cdkDrag override transform styles

Open
#18,143 4 comments 1 reaction 0 assignees View on GitHub
area: cdk/drag-drop P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
When I have transform style on my draggable element, after dragging the transform style will remain.

#### What is the current behavior?
When I have transform style on my draggable element, after start dragging the transform style is overridden.

#### What are the steps to reproduce?
For example add `transform: rotate(45deg);` to `.example-box` here:
https://stackblitz.com/angular/lkdvnnkjmlq?file=src%2Fapp%2Fcdk-drag-drop-overview-example.css
You can notice that after dragging the rotate will disappear.
But, if you will add the `transform: rotate(45deg);` in `style` attribute you will see that the expected behavior is achieved.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/cdk/drag-drop 8.2.3

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the Angular CDK drag-drop handling for the .example-box transform. Confirm that a stylesheet transform such as rotate(45deg) remains after dragging, while preserving the behavior demonstrated by the inline style example.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.