Search code examples
cssangularangular-gridster2

Angular-gridster2, the first added element takes all grid space until refreshing the page

I try to use the Angular-gridster2 and I have a problem - when I add the most first element to the grid - this element takes all space of the grid. How it looks in the Elements in the browser.

<gridster-item _ngcontent-hrw-c99="" ng-reflect-item="[object Object]" class="ng-star-inserted" style="z-index: 1; display: block; transform: translate3d(0px, 0px, 0px); width: 1900px; height: 586px; margin-bottom: 10px; margin-right: 10px;">

As soon as I refresh the page - the grid gets visible, all columns and rows show up and it starts to work correctly - take only 1 row and 1 column how it set up per each element.

<gridster-item _ngcontent-jdx-c99="" ng-reflect-item="[object Object]" style="z-index: 1; display: block; transform: translate3d(0px, 0px, 0px); width: 200px; height: 200px;">

Here is my grid setup:

this.options = {
  gridType: GridType.Fixed,
  fixedColWidth: 200,
  fixedRowHeight: 200,
  minCols: 5,
  maxCols: 6,
  minRows: 5,
  maxRows: 6,
  draggable: { enabled: true },
  displayGrid: 'always',
  swap: true,
};

Also it is strange that until I add the first element the grid is not shown (even if displayGrid: 'always').

It feels like the grid "recalls" the settings only after adding the 1st item and refreshing the page.

I tried to follow the setting on the page of the manual but it also didn't fix the problem https://tiberiuzuld.github.io/angular-gridster2/gridSizes. When I put the minCols and minRows there - it works correctly in the manual (but not in my code). For this case my settings were:

  minCols: 4,
  maxCols: 5,
  minRows: 4,
  maxRows: 5,
  maxItemCols: 1,
  maxItemRows: 1,

Could anybody tell me, please, what am i doing wrong? Thank you in advance!

Solution

  • I think I could fix it by myself. I will provide the answer in case if anybody else will have the same problem.

    I forgot that I also have a toggle to switch between the different states of the grid (for my case - to switch between true and false for this.optiosn.draggable.enabled). Before I provided the amount of the columns and rows only for one state. As soon as I added it for both states - the problem was solved!

    I am talking about these lines in the this.options:

    minCols: 4, maxCols: 5, minRows: 4, maxRows: 5,