Current behavior
With a droppable container, when adding a draggable item dynamically and assigning display: inline-block to its CSS will disable it from being draggable.
Expected behavior
Adding display: inline-block should not interfere with the dragging behaviour. It serves certain styling goals within our development team.
Reproduction of the problem
Create a droppable container.
Dynamically add draggable items from an array with *ngFor while also adding an inline style as follows: display: inline-block.
What is the motivation / use case for changing the behavior?
Customized styling inside the droppable container.
Please tell us about your environment:
Windows 10: win32 x64.
Node: 10.16.3
NPM: 6.9.0
ngx-dnd version: 9.0.0
Angular version: 10.2.5
Browser: Tested on Firefox v93.0, Edge v94.0.992.38, Chrome v93.0
Demonstration
This short video demonstrates when inline-block items cannot be dragged outside the container or even sorted among themselves inside the container. Removing the mentioned CSS will make it work. https://i.gyazo.com/954e3d53ef1363f01d9b83fb574fe0da.mp4
Current behavior With a droppable container, when adding a draggable item dynamically and assigning
display: inline-blockto its CSS will disable it from being draggable.Expected behavior Adding
display: inline-blockshould not interfere with the dragging behaviour. It serves certain styling goals within our development team.Reproduction of the problem
*ngForwhile also adding an inline style as follows:display: inline-block.What is the motivation / use case for changing the behavior? Customized styling inside the droppable container.
Please tell us about your environment:
Demonstration
This short video demonstrates when inline-block items cannot be dragged outside the container or even sorted among themselves inside the container. Removing the mentioned CSS will make it work.
https://i.gyazo.com/954e3d53ef1363f01d9b83fb574fe0da.mp4