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

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?

Create a list of elements suitable for D&D
Add mat-typography class on the cdk-drop container
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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 19
Comments: 23 (6 by maintainers)

Commits related to this issue

feat(cdk/drag-drop): allow for preview container to be customized Currently we always insert the drag preview at the `body`, because it allows us to avoid dealing with `overflow` and `z-index`. The p... — committed to crisbeto/material2 by crisbeto 3 years ago
feat(cdk/drag-drop): allow for preview container to be customized (#21830) Currently we always insert the drag preview at the `body`, because it allows us to avoid dealing with `overflow` and `z-inde... — committed to angular/components by crisbeto 3 years ago

Most upvoted comments

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.

+23

matt328 on Nov 29, 2018

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>

drag_style

bhumin3i on Jun 11, 2019

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
}

billyjov on Jun 19, 2019

Any update on this issue?

am-awais on Jul 13, 2020

I have this issue is well. The problem for me is that my styling comes from a CDN and is very much based on hierarchy of id’s and classes. When the preview is rendered outside this hierarchy, all styling is lost. Manually applying the style is not really an option for me. Anyone has any (other) workarounds?

haveneersrobin on Jul 13, 2020

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.

berlinjunker on Jun 18, 2019

Seems ::ng-deep is an alternative.

::ng-deep .cdk-drag-preview  .mat-list-item-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    height: inherit;
  }

dakshika on Mar 28, 2020

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

IlCallo on Jun 18, 2019

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.

crisbeto on Oct 2, 2018