Question

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

任何想法如何解决这个问题？

Answer 1

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

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

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

1 个答案: