How to change columns number when resizing browser window?

Question

I am creating board with rectangular cards and I'm using angular-gridster2 library. I`m using VerticalFixed grid type and defaoult it have three colums. Is it posible to set a breakpoint and set two columns for some browser width?

Answer 1

Might be a little late, but I made a systeme to recalculate columns based on available size. it works well until you reach the first widget. when i try to set a col count smaller thant what is used already, the systeme is dropping my value and juste resizes. Still it works prety well.

logic is : take the width of screen, divide it by the size of the col you want, take a ceil or floor to have an int, set that int to the grid and tel it to refresh. /* rowHeight is a constant set to 140 (px) in my case */

calculateLayout() {
var contentWindow:HTMLElement = document.querySelector(".app-mainContent"); //container of the grid
this.cols = Math.ceil(contentWindow.offsetWidth/this.rowHeight);
this.rows = Math.ceil(contentWindow.offsetHeight/this.rowHeight);
if (!this.options) {
  this.options = {
    itemChangeCallback: this.itemChange,
    itemResizeCallback: this.itemResize,
    outerMargin: false,
    minCols: this.cols,
    maxCols: this.cols,
    minRows: this.rows,
    maxRows: this.rows,
    draggable: {
      enabled: true,
    },
    resizable: {
      enabled: true,
    },
    pushItems: true,
  };
} else {
  this.options.minCols = this.cols;
  this.options.maxCols = this.cols;
  this.options.minRows = this.rows;
  this.options.maxRows = this.rows;
}
console.log("calculated columns based on width", this.cols);
console.log("calculated rows based on height", this.rows);
this.options.api.optionsChanged();

}

than I call this function on load and on window resize event.

Answer 2

set resizable.enabled = true when initialize grid item

for more refer https://tiberiuzuld.github.io/angular-gridster2/resize

Answer 3

I mean

0 - 600px - mobile;
601px - 900px - two columns;
900px - up - three columns;

How to do that with verticalFixed grid type?

Answer 4

you can use mobileBreakpoint?: number; eg.:

options: GridsterConfig;
options.mobileBreakpoint= 500;

Answer 5

just insert a property in gridster options to achieve this "( disableWindowResize: true )"

gridsterOptions =  {
  gridType: GridType.ScrollVertical,
  displayGrid: DisplayGrid.OnDragAndResize,
  pushItems: true,
  pushDirections: { north: false, east: false, south: true, west: false },
  
  swap: false,
  minCols: 12,
  maxCols: 24,
  minRows: 12,
  maxRows: 60,

  draggable: {
    enabled: true,
  },
  resizable: {
    enabled: true,
  },
  disableWindowResize: true,
};