bug(drag-drop): moved item doesn't retain inherited styles

[IlCallo]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When dragging around an item, all styles (included the inherited ones) shall be retained to keep the look&feel consistent

What is the current behavior?

Inherithed styles are not retained

What are the steps to reproduce?

1. Create a list of elements suitable for D&D
2. Add mat-typography class on the cdk-drop container
3. Drag one item of the list and notice that it doesn't retain Roboto font

What is the use-case or motivation for changing an existing behavior?

Consistency

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.8
Material 6.4.7

Is there anything else we should know?

As a workaround it's possible to add to items a class with all needed styles which would have been inherited from the container.

Being moved to root level (aka out of it's normal containers and CSS rules flow) for the duration of the dragging event, the item should have all currently applied inherited CSS rules copied to avoid inconsistent look&feel

[crisbeto]

This is tricky to do without breaking something else. The reason for the element to be moved to the bottom of the body is to avoid issues with z-index and overflow. We may be able to get away with keeping the element in place since it's position: fixed, however its z-index is still bound by the z-index of its parent elements.

[IlCallo]

Is it possible & feasible to find out, using JS, all inherited CSS properties, apply them as inline style for the duration of the drag and then remove them when drag ends?

Otherwise, in absence of a clean solution, putting in the docs a disclaimer about this behaviour (and why it is like this in the first place) together with the workaround I wrote can be enough I guess.
Even if this will not be feasible if the developer doesn't know the container inside which he's enabling the drag&drop (edge case, but still possible maybe).

A dedicated class added to the moving placeholder can be a good thing too, which let the developer know that this behaviour is known and is currently fixed via a workaround.

[crisbeto]

Copying all of the styles probably won't be feasible. Also, for what it's worth, there's the cdk-drag-preview class which can be used to style the preview as it's being dragged.

[IlCallo]

Makes sense, I already saw that class but didn't actually though about using it.
I don't have other ideas about how to solve the issue currently (:

[matt328]

This is especially cumbersome when working with mat-list-items that need to be children of a mat-list in order for their styling to be applied correctly.

[stephenmaguireland]

I experience the same issue with mat-selection-list and mat-list-option

[bhumin3i]

same issue :

<mat-nav-list class="p-0 " perfectScrollbar>
           <mat-list dense cdkDropList [cdkDropListData]="sharedService.sharedUserProfiles"
             [cdkDropListConnectedTo]="getCategoryIds()" class="top-margin">
             <mat-divider></mat-divider>
             <mat-list-item class="cust-display-list" mat-line
               *ngFor="let profile of sharedService.sharedUserProfiles, let i = index" cdkDrag>
               <img matListAvatar class="fix-avatar-height" src="/assets/user.jpg" alt="...">
               <h3 matLine>{{profile.info.fullname}} </h3>
               <p matLine>
                 <span> {{profile.info.title}}</span>
               </p>
               <button mat-icon-button>
                 <mat-icon>drag_indicator</mat-icon>
               </button>
               <mat-divider></mat-divider>
             </mat-list-item>
           </mat-list>
         </mat-nav-list>

[nikolnikov]

Has anyone figured out a workaround, other than adding styles inline?

[lajuma]

for me styling the .cdk-drag-preview class (which is on the drag preview element) worked. Maybe this helps in some of your cases too.

[IlCallo]

there's the cdk-drag-preview class which can be used to style the preview as it's being dragged.

This is the official way I guess.
Just define a placeholder in SCSS and extend it both on its normal selector and on cdk-drag-preview

[berlinjunker]

I noticed that CSS id's are not being rendered inside the cdk-drag-preview div. I replaced every id with a css class which was then passed through to the preview element. That fixed our problem.

[billyjov]

My solution was to extend/use the same styles.
e.g using scss it can be look like this:

.element {
 // some styles properties
}

.cdk-drag-preview {
  @extend .element; 
}

Or simply take the common selector.

// html
<element class="element-class" cdkDrag>

// css

.cdk-drag-preview,
.element-class {
 // here common styles
}

[jonatino]

Also experiencing the same issues with mat-nav-list items.

[huayunh]

same issue here, with their official example modified to mat-list and mat-list-item.

https://stackblitz.com/edit/angular-s8tsj1?file=src/app/cdk-drag-drop-sorting-example.html