使用add_widget方法时，栅格高度不正确

Gridster grid height not correct when using add_widget method

本文关键字：高度 不正确 add widget 方法 使用      更新时间：2023-09-26

我在我的网站上使用gridster插件，并在从数据库中提取小部件内容时使用add_widget方法插入内容。

然而，当添加小部件时，网格的高度不会根据内容进行调整——它保持为我指定的最小行，小部件溢出网格。并且可能导致窗口小部件重叠并且也被放置在错误的位置。

这是我的代码：

var gridster2;
var serialization = [{
    "col": 1,
    "row": 1,
    "size_x": 4,
    "size_y": 29
}];
gridster2 = $(".gridster ul").gridster({
    widget_margins: [8, 8],
    widget_base_dimensions: [62, 62],
    widget_selector: "li",
    max_cols: 12,
    min_cols: 12,
    min_rows: 4,
    avoid_overlapped_widgets: true,
    resize: {
        enabled: false
    }
}).data('gridster').disable();
$.each(serialization, function (i, widget) {
    gridster2.add_widget('<li id="view_elem1"><span class="gridster_content">Hello world</span></li>', widget.size_x, widget.size_y, widget.col, widget.row);
});

这是一个jsfiddle

这里有一堆相同的内容，它们是硬编码的，而不是使用add_widget方法

有什么办法解决这个问题吗？

我也有同样的问题。只有当你只添加一个小部件时才会发生这种情况，如果你添加了另一个小程序，网格的大小就会调整正常

在您的示例中，您可以通过将min_rows设置为29（或小部件的最大高度）来轻松解决问题。

相关文章：