Search code examples
javascriptgridster

Gridster, widget doesnt render when its width is more than the width of the grid


I use gridsterJS with a grid of 12 columns.

I add widgets dinamycally with add_widget() method.

Widgets are shown correctly. But if i put a widget with sizex of 6 or more it appears in the DOM and its height is correct but its width is 0px.

Then the widget is present, but du to the 0px width, we cant see it visually

In the following sample only one of the two is visible. If i change manualy the sizex from 7 to 6. Then the two widgets are ok :

<ul style="position: relative; height: 180px;">

    <li class="gs_w" style="opacity: 1; display: list-item;" data-col="1" data-row="3" data-sizex="7" data-sizey="1"></li>
    <li class="gs_w" style="opacity: 1; display: list-item;" data-col="1" data-row="1" data-sizex="3" data-sizey="2"></li>

</ul>

Solution

  • Answered on github : https://github.com/ducksboard/gridster.js/issues/200#issuecomment-20469120

    Found the problem, you have to set max_size_x and max_size_y

    gridster=$(".gridster ul").gridster({
        widget_margins: [6, 6],
        widget_base_dimensions: [59, 59],
        max_size_x: 9,
        max_size_y: 8
    }).data('gridster');