gridstack.js issue base

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

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<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>
<button onClick="addNewWidget()">Add Widget</button>

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

SCSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

.grid-stack-item {
   .grid-stack-item-content {
     &:after {
       position: absolute;
       top: 10px;
       right: 10px;
       padding: 2px;
       color: darkgray;
       background-color: white;
       content: '1x1'
     }
  }

  &[gs-h]::after {
    content: '1x' attr(gs-h)
  }

  &[gs-w]::after {
    content: attr(gs-w)'x1'
  }

  &[gs-h][gs-w]::after {
    content: attr(gs-w) 'x' attr(gs-h)
  }
}

JavaScript

var count = 0;
var items = [
	{x: 0, y: 0, w: 2, h: 2},
	{x: 2, y: 0, w: 2},
	{x:4, y:0}
];
items.forEach(w => w.content = String(count++));

var options = { // put in gridstack options here
  float: false
};
var grid = GridStack.init(options).load(items);


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;
};