gridster, how to auto fit to browser size change?
gridster, javascript, jquery
Solution
There's long standing issue #5 on project's issue tracket at Github, titled Auto refresh - Responsive grid and several others closed as duplicates. There you will find code posted by people trying to add responsiveness to gridster.
Problem
I'm trying to find a way to auto-resize gridster container. In a way that when user changes browser size, corresponding gridster widgets resized. (In which number of columns and rows does not change, but actual size will) I can calculate the values for "widget_base_dimensions" as browser size changes, however I couldn't find a way to update/execute to widgets to cope with new size. I was seeking if there is a function that supports this kind of feature and I noticed that on line 3529 on jquery.gridster.js, ``` /** * Recalculates the offsets for the faux grid. You need to use it when * the browser is resized. * * @method recalculate_faux_grid * @return {Object} Returns the instance of the Gridster class. */ fn.recalculate_faux_grid = function() { var aw = this.$wrapper.width(); this.baseX = ($(window).width() - aw) / 2; this.baseY = this.$wrapper.offset().top; $.each(this.faux_grid, $.proxy(function(i, coords) { this.faux_grid[i] = coords.update({ left: this.baseX + (coords.data.col -1) * this.min_widget_width, top: this.baseY + (coords.data.row -1) * this.min_widget_height }); }, this)); return this; }; ``` I tried to some how utilize them but failed :( If anyone have been successfully utilized this code or work around, can you please help me?