Skip to content

bug(cdk/drag-drop): new preview container breaks styling #28974

Closed
@Segdo

Description

@Segdo

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

Description

I have a html table where each tr has the cdkDrag directive so i can sort them. If the drag preview is outside of the table the styling breaks so i have set the cdkDragPreviewContainer to parent, which still works but since the latest update there is a new wrapper div around the table row which breaks the styling and html semantics because we now have a div instead of a tr in the table body.

I would expect that there is an option to disable the wrapping div or maybe even having it opt in as it breaks existing styling. The popover also comes with some own user agent styling which was not there before.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-ycfvod?file=src%2Fmain.ts
Steps to reproduce:
1.
2.

Expected Behavior

I would expect the tr to be directly inside the parent container when i set cdkDragPreviewContainer to parent.

Actual Behavior

The tr is inside a div instead of the parent container.

Environment

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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/drag-drop

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions