How to change z-index of Angular CDK Drag and Drop?

Question

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.

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.

Turnaround

Could you do a Stackblitz? – Alessandraalessandria

I just added Stackblitz – Turnaround

Answer 1

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

Unseasonable

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. – Austerity

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. – Spirograph

Oh man, you just saved me many hours. Cheers :) – Preacher

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. – Fichte

Answer 2

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.

Maryannamaryanne

Answer 3

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;
  }

Wende

Shouldn't it be CdkDragStart instead of ...End? – Pickled

Answer 4

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

Sech

Answer 5

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

Overpower

please add your answer and not just a link – Tien