使用 add_widget 方法时 Gridster 网格高度不正确

Posted 2023-05-07

【中文标题】使用 add_widget 方法时 Gridster 网格高度不正确

【英文标题】：Gridster grid height not correct when using add_widget method

【发布时间】：2015-01-01 13:59:28

【问题描述】：

我在我的网站上使用 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

和here's a fiddle的内容相同，是硬编码而不是使用add_widget方法

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

【参考方案1】：

我也有同样的问题。这只发生在您仅添加一个小部件时，如果您添加了另一个小部件，网格将重新调整大小。

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