angulardrag-and-dropangular-cdk

How to keep size of a row while dragging?

I have an example application where I use cdk-Dragging. Problem is when I drag it, a class called cdk-drag-preview is being applied and making the dragged row smaller.

enter image description here

Above you can see that when I try to drag, the dragged row is getting smaller until I drop it. I want it to be as large as other ones, never changing. I tried to add properties to this class but couldn't make it work. How can I keep the width of this row?

Here is what I tried on stackblitz :

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

Solution

  • You can apply width & height css property styles in .cdk-drag-preview like below.

    .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
   width:87%; // you can add in px also 
   height:11%; // this line added
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
          0 8px 10px 1px rgba(0, 0, 0, 0.14),
          0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }