gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@11.1.2/dist/gridstack.min.css">
<h1>Overlapping items due to maxRow</h1>
<p>To demonstrate <a href="https://github.com/gridstack/gridstack.js/issues/2953">issue 2953</a>:</p>
<table>
<thead>
  <tr>
    <th>Scenario 1</th>
    <th>Scenario 2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <ul>
      <li>Click "Resize Init Item 4"<br>🡒 "Init Item 4" overlaps "Init Item 5"</li>
      </ul>
    </td>
    <td>
    <ul>
      <li>Click "Add 6 more widgets"</li>
      <li>Click "Resize Added Item 1"
      <br>🡒 "added 1" pushes "added 2" down
      <br>🡒 "added 2" overlaps "added 4"</li>
    </ul>
</td>
  </tr>
</tbody>
</table>

<button onClick="resizeInitWidget()">Resize Init Item 4</button>
<button onClick="addWidgets()">Add 6 more widgets</button>
<button onClick="resizeAddedWidget()">Resize Added Item 1</button>

<div class="grid-stack"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

table td, table td * {
    vertical-align: top;
}

JavaScript

let idCounter = 0;

function addWidgets() {
  if (idCounter) return;

  for (let i = 0, c = 6; i < c; i++)
    grid.addWidget({
      autoPosition: true,
      w: 3,
      h: 2,
      minW: 2,
      content: "added " + ++idCounter,
      id: "added" + idCounter,
    });
  console.log(grid.getGridItems());
}

function resizeInitWidget() {
  grid.update(grid.getGridItems()[3], { w: 5, h: 1 });
}

function resizeAddedWidget() {
  grid.update(grid.getGridItems()[5], { w: 5, h: 1 });
}

let grid = GridStack.init({
  margin: 5,
  minRow: 1,
  maxRow: 4, // this will cause items to overlap on resize
  float: true,
  column: 12,
  children: [
    { x: 0, y: 0, content: "Init Item 1" },
    { x: 1, y: 0, w: 2, h: 2, content: "Init Item 2" },
    { x: 4, y: 0, w: 2, content: "Init Item 3" },
    { x: 1, y: 3, w: 4, content: "Init Item 4" },
    { x: 5, y: 3, w: 2, content: "Init Item 5" },
  ],
});


addNewWidget = function () {
  var node = {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    w: Math.round(1 + 3 * Math.random()),
    h: Math.round(1 + 3 * Math.random()),
    content: String(count++)
  };
  grid.addWidget(node);
  return false;
};