Gridster container is fixed, even when resizing window

[wastedspace]

Gridster is great! But has its little problems... The problem that I'm finding most frustrating is that when resizing the browser window, the gridster container doesn't resize.

For example, I have 2 widgets side by side. If I load the 'dashboard' when the browser window's width is narrower than the two widgets, it naturally bumps the 2nd widget underneath the first. This is fine. If I then increase the browser's width to give enough room for the width of the two widgets, the widgets stay where they are. I'd prefer it if they'd jump back into position automatically, but I can live with the way it works. But I can't even drag the 2nd widget back into place manually, as the container of the gridster seems fixed at the width during page load.

I did try and programmatically update the width (html) when resizing, but this made no difference (presumably the container width is stored somewhere):

$( window ).resize( _.debounce(function(e) {

    var width = $( ".gridster" ).width(),
        style = $(".gridster ul").attr("style"),
        regExp = /width: ([\d]+)px/,
        updated_style = style.replace(regExp, "width: " + width + "px");
    $(".gridster ul").attr("style", updated_style);

  }, 250));

I've read about a number of users here who have written hacks to support responsive Gridsters (especially 'OwlyCode'), but I have failed to get anything to work. Just wondering if there is a definitive hack or version that should work as I expect. I'm using v0.5.6...

I'm not particularly bothered about widgets themselves resizing. It would just be good to see them jump back into place when the browser has been resized, and also making the container automatically fit the full size of the browser...

[jifka]

+1 Same issue

[hattoriheiji]

+1 Same, Hope it be fixed

[wastedspace]

I found this function in the Gridster source, but failing to get it to work at all... recalculate_faux_grid(). It specifically says 'Recalculates the offsets for the faux grid. You need to use it when the browser is resized'.

I tried this in its simplest form (with help from underscore), but no joy:

$( window ).resize( _.debounce(function(e) {
    gridster.recalculate_faux_grid();
}, 250));

Maybe it's not the offsets I need to alter... There seems to be two parameters: container_width & wrapper_width that control the dimensions. I can manipulate the latter by simply doing this:

gridster.wrapper_width = $(document).width();

But the container_width is the more complex (& key) one. I've tried forcing the container_width to be $(document).width() within the source code, but that doesn't even work. Help!

[wastedspace]

I believe I have solved the issue(!). I spent some time analysing the official Gridster demos, and figuring out why they work ok, but not my dashboard. I was even trying to eliminate any possibly clashing of other stylesheets. Turns out I simply needed to add 'autogrow_cols: true' in the gridster parameters. This isn't documented anywhere :|

It was within this demo I spotted the parameter:
http://gridster.net/demos/dynamic-grid-width.html

Be sure to reset your browser cache when reloading your Gridster view with the new parameter...