'.cdk-drag-preview not applying styles

I am using the cdk Drag and Drop from angular material, but the drag preview is not working as intended.. I want the preview to look exactly like the element being dragged, but the preview is only showing the text content of the element (no styles).

HTML:

<div *ngFor="let field of fields$ | async" class="fields-list-container" cdkDrag cdkDragLockAxis="y">
            <div class="fields-name-desc-icon">
                <i class="fa fa-tag"></i>
                <div>
                    <div>{{field.name}}</div>
                    <div><em>{{field.displayType | titlecase }}</em>( )</div>
                </div>
            </div>
            <div>
                {{field.codingGroupField.creatorName}}
            </div>
            <div>{{field.codingGroupField.createdOn | date: 'medium' }}</div>
            <actions-menu [actions]="" [actionOn]=""></actions-menu>
        </div>

CSS:

.fields-list-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border: solid 1px #ccc;
        border-radius: 4px;
        cursor: move;

        .fields-name-desc-icon {
            display: flex;

            div {
                margin-left: .5rem;
            }

            div:nth-child(2) {
                font-size: 10px;
            }
        }

        .fa-tag {
            color: var(--rational-dark-blue);
        }
    }

    .cdk-drag-placeholder {
        opacity: 0;
    }
.cdk-drag-preview {
    @extend .fields-list-container;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.draggable-list.cdk-drop-list-dragging .fields-list-container:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Anyone have any ideas why this wouldn't work?

cssangularangular-material


Solution 1:[1]

For anyone stumbling upon this issue, it might be due to where you've put your .cdk-drag-preview styles. Elements being dragged are temporarily moved to the bottom of the html body. If the style for this element isn't scoped to direct children of the body, the style might not apply.

Fix

To quickly identify if this is the issue, try moving your drag-related styles to the global styles.css/styles.scss file (as mentioned in the comments by @c-eggart). Or if your drag-related styles are nested, it might be enough to un-nest it:

From:

.parent {
  .cdk-drag-preview {
    /* some styles */
  }
  /* more drag-related styles */
}

To:

.parent {

}

.cdk-drag-preview {
  /* some styles */
}
/* more drag-related styles */

For more information, see this GitHub issue.

Solution 2:[2]

Applying styles as follows works for me

.cdk-drag-preview {
  &.fields-list-container {
    // Apply custom styles you want to have 
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Isak Engstrom
Solution 2 Janith Widarshana

Related Questions