使用add_widget方法時Gridster網格高度不正確

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（或小部件的最大高度）來輕鬆解決您的問題。