Angular-gridster2: Set OuterMargin = false make grid to expand indefinitely.

[mkgn]

I tried with the source at this demo

While tinkering things, I just set OuterMargin = false and after reloading, the grid keeps growing indefinitely (getting bigger and bigger). At the console I see below warning

Can't be placed in the bounds of the dashboard, trying to auto position!/n{"cols":1,"rows":1,"x":0,"y":1}

Seems a bug?

[CollinGraf314]

I cannot seem to reproduce this. Would you be able to make a gif or recording of your screen while you display the bug?

[mkgn]

I am out for few days. Will check and update in 2 days!

[CollinGraf314]

Any update on this?

[CollinGraf314]

Closing because I can't reproduce and there's been no update. I will gladly re-open this issue given a minimal repro.

[ethanpollitt]

Can confirm & consistently reproduce in latest version. Happens when using any of the outerMargin settings.

Using padding: 0 !important on the <gridster> element to get rid of outer margin for the moment.

[gengjiming]

It happens when I set the following options:
gridType: GridType.VerticalFixed,
setGridSize: true,
outerMargin: false,

[julsette]

Hi @tiberiuzuld, I am still having this issue with

gridType: 'verticalFixed'
setGridSize:true,
outerMargin:false

The grid just continues expanding without stopping, causing errors.
All options I'm using are:

gridType: 'verticalFixed',
setGridSize: true,
compactUp: false,
compactLeft: false,
fixedColWidth: 120,
fixedRowHeight: 120,
keepFixedHeightInMobile: true,
keepFixedWidthInMobile: false, 
compactType: 'none', 
itemChangeCallback: this.itemChange.bind(this),
itemResizeCallback: this.itemResize.bind(this),
defaultItemCols: 1, // default width of an item in columns
defaultItemRows: 1, // default height of an item in rows
margin: 10,
outerMargin: true,
minCols: 5,
minRows: 5,
maxCols: 200,
maxItemCols: 100,
minItemCols: 1,
maxItemRows: 100,
minItemRows: 1,
mobileBreakpoint: 640,
draggable: {
    enabled: false,
    ignoreContentClass: 'gridster-item-content',
    ignoreContent: true,
    dragHandleClass: 'drag-handler',
},
resizable: {
    enabled: false,
},
api: {
    optionsChanged: this.optionsChanged.bind(this),
},
swap: true

If I just change outerMargin to true, it works fine and calculates the width and height correctly, but this means I have to use a workaround by setting padding 0 on the gridster element's style, as @ethanpollitt pointed, to remove the outer margin.

[lifeinchords]

I have the same inifinte growing issue, when I set outerMargin: false, with my config of:

 options: GridsterConfig = {
    gridType: GridType.ScrollVertical,
    displayGrid: DisplayGrid.Always,
    fixedRowHeight: 75,
    setGridSize: true,
    margin: 32,
    minCols: 20,
    maxCols: 20,
    minRows: 10,
    draggable: { enabled: true },
    resizable: { enabled: true },
    minItemArea: 6,
    defaultItemCols: 3,
    defaultItemRows: 5,
    enableEmptyCellDrop: true,
    scrollToNewItems: true,
  };

when I take out the outerMargin it works as expected.

The setGridSize is key for me, so I'll probably find some negative margin or other padding/spacing tricks in meantime

[gs-saagarwal]

@mkgn Is there any update on this Issue?
I'm still facing this Issue, it would be really helpful if you could share a fix or at least a workaround.

[mathi123]

This occurs when outer margin is smaller than margin of grid items. (both with outerMargin true/false)

[andreElrico]

can repoduce:

STACKBLITZ

outermargin: false and setGridSize: true will lead to this issue

This occurs when outer margin is smaller than margin of grid items. (both with outerMargin true/false)

this is exactly the case @mathi123 you pinpointed this.