GridStack autoposition bug with version > 7

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

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?

@fredericrous

@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'
}

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...

@adumesny

@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

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...

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

@ildarkayumov

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.

@ildarkayumov

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

fix autoPlacement from DOM reading

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!

@adumesny

Thank you @adumesny
Will do.

test partial fix

Navigation Menu

Repository navigation

GridStack autoposition bug with version > 7 #2232

Subject of the issue

Your environment

Steps to reproduce

Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

GridStack autoposition bug with version > 7 #2232

Description

Subject of the issue

Your environment

Steps to reproduce

Expected behavior

Activity

fredericrous commented on Mar 17, 2023

stephenjason89 commented on Mar 17, 2023

adumesny commented on Mar 17, 2023

stephenjason89 commented on Mar 23, 2023

adumesny commented on Mar 23, 2023

ildarkayumov commented on Mar 24, 2023

adumesny commented on Mar 25, 2023

stephenjason89 commented on Mar 26, 2023

adumesny commented on Mar 26, 2023

stephenjason89 commented on Mar 26, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions