[Drag and drop] problems when changing height after start

[JurajMlich]

What is the expected behavior?

Drag and drop working :)

What is the current behavior?

If I change the height of elements (that are draggable) for example by hiding some elements after I start dragging, the drag and drop mechanism thinks the items are still the original height (and therefore rendering placeholder at wrong place and behaving incorrectly).

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-ggdtyr?file=app%2Fapp.component.css

(moving between columns does not work for some unknown reason but that is not important)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

newest ones

Is there anything else we should know?

If you point me in the right direction, I can provide a fix.

[sergiocosus]

@JurajMlich A temporal hack fix to that issue, on the cdkDragStarted event i put this, it is not a nice solution but meanwhile it is fixed.

  dragStarted(event: {source: CdkDrag}) {
    setTimeout(() => {
      event.source._dragRef.dropContainer['_cachePositions']();
    }, 200);
  }

[vorachirag]

@JurajMlich I tried to attempt the same thing. I just hide content inside of draggable elements when an element starts dragging.
.cdk-drop-list-dragging { mat-card { mat-card-content { display: none; } } }

@sergiocosus I am getting an error when I tried your solution.

Property 'dropContainer' does not exist on type 'DragRef<CdkDrag<any>>'. Did you mean '_dropContainer'?ts(2551)
drag-ref.d.ts(137, 13): '_dropContainer' is declared here.

[thabalija]

@vorachirag it worked before the update. Now this works:

dragStarted(event: {source: CdkDrag}) {
  setTimeout(() => {
    const dropContainer = event.source._dragRef['_dropContainer'];

    if (dropContainer) {
      dropContainer['_cacheOwnPosition']();
      dropContainer['_cacheItemPositions']();
    }
  });
}

[vorachirag]

@thabalija Thanks. It works.

[crisbeto]

Bumping to a P2 since it seems like an issue that people keep bumping into, based on the number of duplicate issues.