Horizontal resize unexpectedly changes height when using very high column count and small cellHeight

[razmikhovhannisyan]

Subject of the issue

We need very small drag and resize steps, so we increased the grid resolution by setting:

• column: 1000
• cellHeight: 1
• margin: 3

Your environment

GridStack v12.4.2
Angular 21

After this change, resizing behaves unexpectedly.

Steps to reproduce

Angular demo:
https://stackblitz.com/edit/stackblitz-starters-ifdclhe3

1. Open the StackBlitz demo.
2. Resize the 3rd widget (right-left).
3. Decrease its width from left to right in small steps.
4. Repeat the resize several times.

Expected behavior

While resizing horizontally (west handle), the widget also increases in height from the bottom, even though only horizontal resizing is being performed.

The height (h) changes unexpectedly during horizontal resize.
This does not appear to be a collision issue — it happens during repeated small horizontal adjustments.

Notes

We are not sure if this is a bug or if we are using the grid in an unintended way.
Perhaps we are misconfiguring something when using very high column counts and very small cellHeight.

If this is expected behavior, we would appreciate guidance on the correct way to achieve minimal drag/resize step precision.

Thank you for the great library — we really appreciate the work behind GridStack.
And apologies if we are doing something wrong on our side.

[adumesny]

please post a video as I'm not seeing any issues sizing the 3rd widget width.
You are lucky as GS now uses browser vars for cells as making essentially 1px increment was never what it was designed for and created lots of issues.

actually playing with it some more I see all sorts of issues. Again GS was never designed for px layouts. unlikely to get addressed unless you want to donate for it but no guarantees.

[razmikhovhannisyan]

@adumesny

Thank you for the quick response.

gridstack-resize-bug.mp4

I’m attaching a video that demonstrates the issue more clearly.

In the recording, I resize the 3rd widget from left to right in very small steps. You can see that while resizing horizontally, the height also changes unexpectedly from the bottom.

One more observation: if we slightly increase cellHeight (for example from 1 to 5), the issue may temporarily disappear on some screen sizes. However, depending on the screen resolution, the problem can still occur.

[adumesny]

ok, that would be the 2nd widget, not the 3rd - hence video helps a lot.
Didn't look at your code, but does it also happens with simple TS grid (no angular) ?