21

I am using the Angular Material CDK Drag and Drop Functionality in my application. The drag and drop functionality is working fine, unless I am using it within a dialog (for most components I am using Nebular, in this case the Nebular dialog). The problem I am encountering is, as soon as I drag a draggable element within the dialog, the element disappears behind the dialog. After dropping it, it reappears on the correct position. In the screenshot, I am dragging the "AAAA" element away from the list - it disappears behind the dialog.

draggable button disappears behind dialog

Stackblitz: https://stackblitz.com/edit/angular-znqckb

I am using the following implementation:

 <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" [cdkDropListData]="techs"
     (cdkDropListDropped)="drop($event)">
     <button *ngFor="let tech of techs" nbButton cdkDrag>{{tech}}</button>
 </div>

Component.ts:

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}

I did not modify the style sheet. I assume this issue can be solved somehow by modifying the z-index but I don't know how to apply it to the "dragging" element.

2
  • Could you do a Stackblitz?
    – Michael D
    Commented Apr 3, 2020 at 15:21
  • I just added Stackblitz Commented Apr 3, 2020 at 19:55

5 Answers 5

27

You can change the DragRefConfig injecting the right config (with the desired z-index) in your component. For example:

const DragConfig = {
  dragStartThreshold: 0,
  pointerDirectionChangeThreshold: 5,
  zIndex: 10000
};

providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }]

The z-index of the preview element will be 10000 ;-)

For more infos: https://material.angular.io/cdk/drag-drop/api#DragRefConfig

4
  • This approach worked for me where the accepted answer did not, likely because of CSS specificity rules. This approach requires version 9.2.4 or above of @angular/cdk. The zIndex property was added in that version.
    – harleybl
    Commented Sep 17, 2020 at 18:12
  • The const is put in a module.ts file, and the providers statement is placed within said file's @NgModule({}). Or at least that is what I had to do.
    – Reid
    Commented May 26, 2021 at 18:04
  • 1
    Oh man, you just saved me many hours. Cheers :) Commented Dec 24, 2021 at 15:57
  • Thank you so much for this. In my case, the CDK-drag-preview was working everywhere except in modal popups. This solved it. Hope this helps future readers. Commented Dec 4, 2023 at 13:36
7

I'm struggling with this problem myself and I'm using a crude workaround for now. Forcing the z-index of .cdk-overlay-container to 1000 in your global styles (styles.scss) should get you the result you want. It's not best practice though.

Add this in styles.scss:

.cdk-overlay-container {
  z-index: 1000 !important;
}

Stackblitz here

To my knowledge, it's not possible to force a z-index on the drag preview ("dragging" element) because the cdk sets its z-index dynamically as inline style. The Nebular library you are using seems to be setting the z-index of the overlay container to 1040. The Angular Material library sets the drag preview's z-index as 1000, that's why it goes behind the overlay. Vanilla Angular Material sets the z-index of cdk overlay to 1000, so drag & drop will work in that scenario.

1

For previous angular material versions than 9.

In the html dragable element:

<div ... cdkDrag (cdkDragStarted)="onDragStarted($event)"</div>  

In the compoonent ts:

export class ...{
  zIndexSerial: number = 1000;

  onDragStarted(event: CdkDragEnd): void {
    event.source.element.nativeElement.style.zIndex=this.zIndexSerial+"";
    this.zIndexSerial = this.zIndexSerial+1;
  }
1
  • Shouldn't it be CdkDragStart instead of ...End? Commented Dec 21, 2021 at 14:24
1

For Angular version 8, I added the following to styles.scss and got it to work in the modal:

.cdk-drag-preview {
    z-index: 9000 !important;
}

See .cdk-drag-preview in https://material.angular.io/cdk/drag-drop/overview#styling

0

for anyone struggling with the same issue.I found the solution to be z-index only work on positioned elements Refer to this link description here

1
  • 4
    please add your answer and not just a link
    – DanielM
    Commented Mar 26, 2021 at 0:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.