Resize grid when resizing browser window

Question

I used to fill the whole window as the default. I tried to resize the browser window: but the area used for the grid is the same. You must reload the page so that it matches. How can I archive this without reloading the page?

Edited by

An interesting fact is that when you change the order of the grid, the columns change.

Answer 1

did so:

$(window).resize(function () { $("#grid").height($("<container for grid>").height()); $(".slick-viewport").height($("#grid").height()); }); 

Thanks to the jQuery function and its height () function

Answer 2

This works great for me. Perhaps the resizeCanvas() function is a new function in a spotted grid.

The code is CoffeeScript.

 $(window).resize -> grid.resizeCanvas() 

Answer 3

This works better than just changing the height of the .slick-viewport.

 $(window).resize(function(){ var h=$(window).height(); $('#myGrid').css({'height':(h-65)+'px'}); grid.resizeCanvas(); }); 

Answer 4

Everything seems to work fine:

 $( window ).resize( function() { grid.resizeCanvas(); });