Repository navigation
Horizontal resize unexpectedly changes height when using very high column count and small cellHeight #3230
Description
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
- Open the StackBlitz demo.
- Resize the 3rd widget (right-left).
- Decrease its width from left to right in small steps.
- 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.
Activity
adumesny commentedon Feb 13, 2026
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 commentedon Feb 13, 2026
@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 commentedon Feb 13, 2026
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) ?
razmikhovhannisyan commentedon Feb 14, 2026
@adumesny
Thank you for your reply.
Yes, the issue is not only happening in Angular. It also occurs in a plain JavaScript / TypeScript GridStack setup (no Angular). We reproduced the same behavior in a simple Vite example:
https://stackblitz.com/edit/vitejs-vite-8hx4ys5s?file=package.json,src%2Fstyle.css,src%2Fmain.js,src%2Fgridstack-mock-data.ts,index.html&terminal=dev
Also, it’s not only the second widget. The problem affects all items — basically every widget behaves incorrectly. In the video, we only showed two widgets to make the issue easier to see and understand.
don't recompute w/h during resize if not changed (rounding errors)
don't recompute w/h during resize if not changed (rounding errors)