add_height doesn't always set the height of the widget properly

[joshua-golub]

I am creating my Gridster using these options (among others):

widget_margins: [ 4, 4],
widget_base_dimensions: [ 180, 180 ],

I then add various widgets (first sorted by Gridster.sort_by_row_and_col_asc), _one_ of which look like this:

var $added = gGridster.add_widget( $w, /*size_x*/ 2, /*size_y*/ 2, /*col*/ 5, /*row*/ 2 );
console.log( "$added.height = " + $added.height() );

Since I've got a base height of 180 and a size_y of 2, I would expect the height of the added widget to be 368. But, _sometimes_ -- not all the time -- the height of the added widget is _150_!

I think that the _sometimes_ has to do with the fact that I've got a lot of async processing going on and so the timing of things isn't consistent.

Any recommendations? I've been chasing this one for a while.

Thanks in advance for any help that one can offer.

-Josh

[joshua-golub]

Followup: I think the problem is that sometimes, based on timing, the auto-generated <style> element isn't ready for the browser to apply when I call add_widget, even though I have successfully created the gridster before calling add_widget. That's just a guess, though.

[jhowley89]

if you know the upper limits of your grid then you can generate the gridster styles once e.g.

$(".gridster ul").gridster({
  autogenerate_stylesheet: false,
});
gridster = $(".gridster ul").gridster().data('gridster'); // get instance
gridster.generate_stylesheet({rows: 50, cols: 2});

[joshua-golub]

I figured this one out. The problem is that add_widget isn't reentrant. I am loading the content for my widgets in parallel using Ajax and was calling add_widget in the success handler. If the timing was such that add_widget got called in reentrant fashion, then the result of the call (the height and width in particular) was unpredictable.

I am not saying that add_widget should be reentrant; just that I didn't initially realize that I was calling it as such.

I rearranged my code to create the entire grid first (using add_widget) and then loading the content into them (still via Ajax) afterward.