API calls overlapping items due to maxRow

[E4RIJMP]

Hello,
assuming there is maxRow limit and the grid is stacked with items. The user can still resize one of these items so that other items automatically reposition themselves and move past the row limit to a lower row. But if the same thing is accomplished by using update from the GridStack class, the items will not move to a lower row but overlap each other.

I created a minimal example for this and another issue I encountered (for which I created a separate issue). In that example, clicking the "add items" button will create some items. And clicking "resize item" will make one of these items overlap another one. If this resizing is performed manually (via mouse) everything works as expected and the items will not overlap.

gridstack-angular-example.zip

Regards

[adumesny]

please post plain JS example (though I know angular) to make sure it is lib issue and not your code. easier to debug and add to testbed.

[E4RIJMP]

Okay, here is some JS. It's not exactly the same, as the previous example had some Angular-specific code (e.g. using "selector" of NgGridStackWidget to use Angular components as items). But here you go:

gridstack-js-example.zip

It uses expressjs and a default port. So, after "npm install" and "node server.js" the code will be running on http://localhost:3000

There are three buttons:

If you click "Resize Init Item 4", "Init Item 4" will overlap "Init Item 5".

If you click "Add 6 more widgets" and then "Resize Added Item 1", "added 1" will push "added 2" down. "added 2" will then overlap "added 4".

In both scenarios the behavior is different from what happens, if you manually resize "Resize Init Item 4" or "added 1" via mouse.

[adumesny]

I was going to say the bug report say to use online bug example, but looks the template got deleted... what's next. hummm. Used to say:

Steps to reproduce

You MUST provide a working demo - keep it simple and avoid frameworks as that could have issues - you can use
https://jsfiddle.net/adumesny/jqhkry7g

[E4RIJMP]

The third time is the charm I guess.

Steps to reproduce

• Create a grid where "maxRow" is set
• Fill the grid with enough items to reach the row limit
• Resize one of these items via "grid.update(...)"

https://jsfiddle.net/ar4ycvuj/

[adumesny]

Oh see, you are filling maxRow and asking to resize in code things that it can't fit (interactively it will NOT do it if it can't). That is a corner case that wasn't tested for sure... thanks for the demo.