bug: Grid operation resulting in a changed grid size (e.g. added scrollbar) can make items extend past the grid or have empty grid areas

[Achilles1515]

See GIF below, where the first drag and drop results in the grid height increasing, causing a scrollbar to be added to the page reducing the width of the grid --> top right grid item is now extending past the grid. Moving the item back to its original position, causing the scrollbar to be removed and increasing the grid width, now leaves empty space on the right side of the grid until the next move operation begins.

Perhaps this falls under the category of how to handle updating grid items when the grid size is changed in the middle of a drag operation or even just sitting statically (StackBlitz --> class is added/removed every two seconds causing the grid size to change, yet the item sizes aren't updated without triggering a drag operation).

Possible solution may start with adding a ResizeSensor to the ktd-grid element.

[llorenspujol]

Thanks for reporting @Achilles1515 .

About 'resizing' and width changes etc, this grid solution it not intended to 'resize' by itself. It is a design decision. We took this decision because this grid is meant to be used in dashboards. Dashboards have charts & those charts may be resized manually too and may be costly to render in some cases, so we want the lib user to handle it manually the way he wants.

For example, the second bug you posted, the solution would be resize manually, example: https://stackblitz.com/edit/angular-grid-layout-playground-enzrrp?file=src/app/playground/playground.component.ts

About the first one (the scrollbar appearing), it is something that is annoying me for some time, I don't like it to behave like that, but sincerely for now I don't have a solid solution for it. The main objective would be the scrollbar to not take space, because we would avoid unnecessary resizes on the grid and on it's items. But this feature of 'scrollbar to not take space' seems not well supported too. There is obviously the overflow: overlay but is not standarized in all browsers. There is also a workaround that could be done if the grid is placed taking all viewport width, using 'vw' units, that doesn't take into account the scrollbar, see: https://stackblitz.com/edit/angular-grid-layout-playground-kxbcji?file=src/app/playground/playground.component.scss

Another thing that could be done is: - The lib user could detect if scrollbar appears, if so, he resizes manually. But for now, resizing manually while performing a drag operation is not supported. We should add support for resizing while performing a drag operation to allowing this feature.

I am open to suggestions and other solutions if you have, would be nice to solve this cleanly.