GridStack autoposition bug with version > 7

[stephenjason89]

Subject of the issue

Your environment

• version of gridstack.js -7.2.3
• which browser/OS microsoft edge macos

Steps to reproduce

Create this a grid-stack with grid-stack-item

like this

notice the last div with id='Products' it has no gs-x or gs-y props

then call

GridStack.init(
{	cellHeight: 240,
	styleInHead: true,
	margin: '2.5px'
})

You will notice that instead of placing the div with id='Products' beside div with id='Inventory Stock Value',
It places it on the next row. Like so

I downgraded to vs 6.0.3 for the meantime which fixes this issue

Expected behavior

[fredericrous]

I remember I seen this bug as well at some point when I was playing with gridstack and media queries.
just throwing a question to maybe help narrow the issue: do you have a custom number of columns?

[stephenjason89]

@fredericrous hello thanks for looking in to this.
No I don't,
I only have these in my gridOptions

{	cellHeight: 240,
	styleInHead: true,
	margin: '2.5px'
}

[adumesny]

please post a bug with a simple jsfidle running jsfidle or similar example as the template requires... do't expect me to crete one for you, then fix any issues...

[stephenjason89]

@adumesny sorry about that.
Here's a stackblitz
https://stackblitz.com/edit/nuxt-starter-weppuk?file=app.vue
Press the add button and you'll see this is happening.

Downgrade to 6.0.3 to see the correct behavior.

Also, you'll notice that i do dynamic import
const { GridStack } = await import('gridstack')
in my local project, it throws me an error during serverside rendering if i import like
import {GridStack} from 'gridstack'

Thank you so much

[adumesny]

will have to dup this in a simple js example. you are destroying and recreating the grid, which is odd. makeWidget() or load() is what you should call instead...

[ildarkayumov]

Hello
I had the same issue - https://jsfiddle.net/ildarkayumov/05Lthmpx/

As you can notice first 2 items (1 and 2) have x and y attributes but last one (3) does not have x and y. So I expected last item to appear on right after 2. But something weird happens and 3 appears between 1 and 2.

I investigated the problem a little bit and found that it started after these changes https://github.com/gridstack/gridstack.js/blob/master/src/gridstack.ts#L361

this.getGridItems().forEach(el => { // get dom elements (not nodes yet)
  let x = parseInt(el.getAttribute('gs-x'));
  let y = parseInt(el.getAttribute('gs-y'));
  elements.push({
    el,
    // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order
    i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * column
  });
});
elements.sort((a, b) => b.i - a.i).forEach(e => this._prepareElement(e.el)); // revert sort so lowest item wins

So elements from example are eq to

this._prepareElement calls this.engine.addNode -> this.engine.findEmptyPosition is called only for item 3 and is called before first 2 items are added to engine.nodes.

I resolved the problem with small 'hack' like here - https://jsfiddle.net/ildarkayumov/ruzc9g3x/
I added gs-y="-1000" to last element

that allows to make calculated i for last elemet to be eq 1000 + -1000 * 12 = -10000

[adumesny]

thank you @ildarkayumov that example makes it easy to debug and fix now https://jsfiddle.net/adumesny/yt4ghjdn/

not sure why i reverse sorted items - lcearly autoPosition need to be done in the DOM order. the only question is if you have 2 widgets with specific conflicting position, which one wins ? could go either way, so dom order palcement is likely more natural and last one wins.

[stephenjason89]

will have to dup this in a simple js example. you are destroying and recreating the grid, which is odd. makeWidget() or load() is what you should call instead...

Oh, i believe it is due to Gridstack not being able to detect vue 3's reactive v-for changes.
Here's a link of an issue about it. #2076

Thank you for providing a better example @ildarkayumov

[adumesny]

fixed in next release - this turned out to be more work than I expected as I need to make sure loading into 1 or 12 column acted the same, and bunch of new stuff needed to happen.

don't forget to donate if you find this lib useful!