1

Im using the Angular CDK drag and drop module, it works well on html elements like div, p and such. but for some reason when i put a cdkDrag directive on a component, it doesnt work.

<!-- WORKS -->    
<div cdkDrag>content</div>    

<!-- DOESNT WORK -->
<my-component cdkDrag></my-component>

another thing i noticed is that every component in angular have width and height set to auto (basically 0x0), unless i edit the css and put display: block on the component style

Creep Death
  • 59
  • 6
  • 1
    And if you wrap the component with a div? I believe it has to do with the way the component is compiled to html. – DTul Apr 02 '19 at 07:24
  • And if you set them to block, can you then drag them ? –  Apr 02 '19 at 07:27
  • i wrapped the component with a div, it works, thx. for some reason when i used 'block', the component's width became 100%, so i used 'inline-block'. – Creep Death Apr 02 '19 at 07:40

1 Answers1

3

A component is a custom tag. Within a browser this is treated as an 'unknown' tag, and made to have the default display of inline. This will also cause the dimensions to be 0x0 if you add block elements in there.

To overcome this, you should make it display: block or inline-block or flex (or whatever suits you) to make it also draggable. You can make a global class if this doesn't break the layout of the rest of your draggables:

.cdkDrag {
  display: inline-block;
}
Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149