Angular Mat – Drag&Drop with resize


I have implemented drag&drop functionality with cdkDrag and it works perfectly.
I added to my CSS resize: horizontal; so that I can resize my component.

A problem that I am now facing is that when resizing component I can resize them bigger than the bounds that cdkDragBoundary set.

I tried adding max-width: calc(values); with many other iterations of max-width, but the problem is that max-width is set for the component that is located on the left of boundary (this works fine until the component is moved any number of pixels to the right)

Example:
The component itself, when not moved on X coordinate knows whats the max-width

resize

But if the component is moved:
resize-out-of-bounds

Is it possible to do this with Angular Mats, or do I need to do something along these lines:
https://medium.com/swlh/create-a-resizable-and-draggable-angular-component-in-the-easiest-way-bb67031866cb

Canadian Web HostingAvaHost.Net Web Hosting

Product of the Month September 2016

Source link

Leave a Comment

Your email address will not be published. Required fields are marked *