Gridster grid height not correct when using add_widget method

Question

I am using the gridster plugin on my site and inserting the content using the add_widget method as the widget content is pulled in from a database.

However, when the widgets are added, the height of the grid is not adjusted to the content - it stays as the min-rows that I have specified and the widget overflows the grid. and can cause widgets to overlap and be placed in the wrong positions too.

Here's my code:

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);
});

Here's a jsfiddle

And here's a fiddle of the same content which is hard coded rather than using the add_widget method

Any ideas how to fix this problem?

Answer 1

I have the same problem. This only happens when you add just a single widget, if you would have added another widget, the grid would re-size ok.

On your example, you can easily fix your problem by setting the min_rows to 29 (or the maximum height of the widget).