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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.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>
<h3>
Issues:
</h3>
<ul>
  <li>Using non-integer cellHeight does not calculate content height correctly</li>
  <li>Adding Widget using either addWidget or makeWidget does not update cell height</li>
  <li>Changing cell height programatically does not update cell height</li>
</ul>
<div>
  <p><b>cellHeight: </b><span id="cellHeightDisplay">1rem</span></p>
  <p><b>column: </b><span id="columntDisplay">2</span></p>
</div>

<div><a class="btn btn-default" onClick="changeColumns()" href="#">Change Columns</a></div>
<div><a class="btn btn-default" onClick="changeCellHeight()" href="#">Change Cell Height</a></div>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget using addWidget</a></div>
<div><a class="btn btn-default" onClick="addNewWidgetWithMakeWidget()" href="#">Add Widget using makeWidget</a></div>
<br />

<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">
      <div>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

.grid-stack-item {
    background-color: lightblue;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

JavaScript

var cellHeight = 16;
var columnCount = 12;
var options = { // put in gridstack options here
  float: false,
  fitToContent: true,
	cellHeight: cellHeight,
  column: columnCount
};
var grid = GridStack.init(options);

var count = 0;

changeColumns = function() {
	columnCount = (columnCount == 2 ? 1 : 2);
	grid.column(columnCount);
    document.getElementById("columntDisplay").innerHTML = String(columnCount);
};

changeCellHeight = function() {
	cellHeight = (cellHeight === 16 ?  32 : 16")
	grid.cellHeight(cellHeight);
  document.getElementById("cellHeightDisplay").innerHTML = String(cellHeight);
};


addNewWidget = function () {
  var node = {
		w: 6
  };
  node.content = "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>";
  grid.addWidget(node);
  return false;
};


addNewWidgetWithMakeWidget = function () {
  var item = document.createElement("div");
  item.className = "grid-stack-item";
  var content = document.createElement("div");
  content.className = "grid-stack-item-content";
  
  var cellContentContainer = document.createElement("div");
	const cellText = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
  
  item.appendChild(content);
 ...