CDK drag drop not working when we add CSS transform on cdkDragHandle

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

No response

Description

As per Given UI I want to show cdkDragHandle(+) little bit away from drag item, To match GUI I am using CSS transform on cdkDragHandle so that it will placed away from drag items please refer below screenshot.

I have added specific width on draglist(50px) and CSS transform(-150px) on draghandle, when i am trying to drag and drop item it is not working as expected.

If i remove below css from app.component.css, it works fine, ` .cdk-drop-list { width: 50px; }

.cdk-drag-handle { transform: translateX(150px); }`

Reproduction

[Steps to reproduce:

1. Go to (https://stackblitz.com/edit/angular-cdk-drag-drop-sortable-flex-wrap-v2-9v5zik)
2. Drag using (+) drag icon
3. Ideally it should drop dragged item to new position

Expected Behavior

When i am dragging item to new position it should be dragged and dropped to new position.

Actual Behavior

When i am dragging item to new position it is not getting dropped to new position.

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

I’m closing this issue since the module is working as expected. It can be reopened if any other issues come up.

[angular-automatic-lock-bot[bot]]

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.}