gridstack.js issue base

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

by akosfekete

HTML

<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.3/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.3/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.3/dist/gridstack-extra.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div
<div><a class="btn btn-default" onClick="printLayout()" href="#">Print layout</a></div>

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

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

.grid-stack.grid-stack-nested {
  position: absolute;
  inset: 20px 0 0 0; 
  border: 1px solid black;
}

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  cellHeight: "70px",
  column: 2,
  minRow: 3,
  float: false,
  acceptWidgets: true,
};
var i = 0;
var grid = GridStack.init(options);

addNewSubGrid = function() {
  var node = {
    x: 0,
    y: 0,
    w: 2,
    h: 2
  };

  node.subGridOpts = {
    cellHeight: "50px",
    column: 3,
    //margin: 5,
    padding: 5,
    float: false,
    minRow: 2, // don't collapse when empty
    disableOneColumnMode: true,
    acceptWidgets: true,
    id: "main",
  };
  node.content = "<div>some content</div>";
  node.id = "test-id";
  grid.addWidget(node);
  return false;
};

addNewWidget = function() {
  var node = {
    id: ++i,
    x: 0,
    y: 0,
    w: 1,
    h: 1
  };
  node.content = i === 1 ? "Moved from grid" : "Widget";
  grid.addWidget(node);
  return false;
};

printLayout = function() {
  console.log(grid.save(false, false));
}

addNewWidget();
addNewWidget();
addNewSubGrid();