Describe the bug
After upgrading from 12.3.3 to 12.4.2, all widgets loaded via grid.load() stack on top of each other at position (0, 0). The grid container shows gs-current-row="NaN" and every item gets gs-x="0" gs-y="0".
The issue appears to be caused by widgets that omit the h (height) property. In 12.3.3, h defaults to 1 implicitly. In 12.4.x, the missing h causes row calculation to produce NaN, breaking the entire layout.
To Reproduce
const grid = GridStack.init({
float: false,
cellHeight: 292,
minRow: 1,
margin: "8px",
column: 2,
disableResize: true,
});
// Widgets WITHOUT explicit `h` property
grid.load([
{ type: "widget-A", w: 2, x: 0, y: 0 },
{ type: "widget-B", w: 1, x: 0, y: 1 },
{ type: "widget-C", w: 1, x: 1, y: 1 },
{ type: "widget-D", w: 2, x: 0, y: 2 },
]);
Expected behavior
Widgets should default to h: 1 when h is not provided (as in 12.3.3), and layout correctly based on their x/y values.
Actual behavior
All widgets render at (0, 0) overlapping each other. Inspecting the DOM:
v12.3.3 (working):
<div class="grid-stack" gs-current-row="4" style="--gs-cell-height: 292px; --gs-column-width: 50%;">
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
<div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="1" style="top: var(--gs-cell-height); left: var(--gs-column-width);">
...
</div>
v12.4.2 (broken):
<div class="grid-stack" gs-current-row="NaN" style="--gs-cell-height: 292px; --gs-column-width: 50%;">
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="2" style="width: calc(2 * var(--gs-column-width));">
...
</div>
Workaround
Explicitly adding h: 1 to every widget before calling load() fixes the issue:
grid.load(widgets.map(w => ({ ...w, h: 1 })));
Environment
- gridstack version:
12.4.2 (works on 12.3.3)
- Browser: Chrome (latest)
- Framework: Vue 3 (using
GridStack.renderCB)
- Build tool: Vite (issue occurs in production builds; dev mode also affected)
Additional context
The regression was likely introduced by a change in load() or the engine's layout calculation between 12.3.3 and 12.4.0. Previously, missing h was implicitly treated as 1. Now it seems to propagate as undefined/NaN through the row height calculation, causing gs-current-row="NaN" on the container.
Describe the bug
After upgrading from
12.3.3to12.4.2, all widgets loaded viagrid.load()stack on top of each other at position(0, 0). The grid container showsgs-current-row="NaN"and every item getsgs-x="0" gs-y="0".The issue appears to be caused by widgets that omit the
h(height) property. In12.3.3,hdefaults to1implicitly. In12.4.x, the missinghcauses row calculation to produceNaN, breaking the entire layout.To Reproduce
Expected behavior
Widgets should default to
h: 1whenhis not provided (as in12.3.3), and layout correctly based on theirx/yvalues.Actual behavior
All widgets render at
(0, 0)overlapping each other. Inspecting the DOM:v12.3.3 (working):
v12.4.2 (broken):
Workaround
Explicitly adding
h: 1to every widget before callingload()fixes the issue:Environment
12.4.2(works on12.3.3)GridStack.renderCB)Additional context
The regression was likely introduced by a change in
load()or the engine's layout calculation between12.3.3and12.4.0. Previously, missinghwas implicitly treated as1. Now it seems to propagate asundefined/NaNthrough the row height calculation, causinggs-current-row="NaN"on the container.