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