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.
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 :
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);
}
You don't need to specify a drag preview and if you leave it out, then the default preview will be the same size as the original. See StackBlitz I forked from your code:
https://stackblitz.com/edit/angular-gbls7d-wcsibj
I commented out the <span *cdkDragPreview> part of your code. Then the overall preview has the same size as the original line. See screenshot:
