javascript - Gridster，当小部件的宽度大于网格宽度时不会渲染

Question

我使用 gridsterJS 和 12 列的网格。

我使用 add_widget() 方法动态添加小部件。

小部件正确显示。但是如果我放置一个 sizex 为 6 或更大的小部件，它会出现在 DOM 中，并且其高度是正确的，但其宽度是 0px。

然后小部件就出现了，但是由于 0px 宽度，我们在视觉上看不到它

在下面的示例中，只有两者之一可见。如果我手动将 sizex 从 7 更改为 6。那么这两个小部件就可以了:

<ul style="position: relative; height: 180px;">

    <li class="gs_w" style="opacity: 1; display: list-item;" data-col="1" data-row="3" data-sizex="7" data-sizey="1"></li>
    <li class="gs_w" style="opacity: 1; display: list-item;" data-col="1" data-row="1" data-sizex="3" data-sizey="2"></li>

</ul>

Answer 1

在 github 上回答:https://github.com/ducksboard/gridster.js/issues/200#issuecomment-20469120

Found the problem, you have to set max_size_x and max_size_y

gridster=$(".gridster ul").gridster({
    widget_margins: [6, 6],
    widget_base_dimensions: [59, 59],
    max_size_x: 9,
    max_size_y: 8
}).data('gridster');