gridstack.js issue base
Use this as a base for examples for gridstack.js issues.
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/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>
<br />
<div class="grid-stack"></div>
SCSS
.grid-stack {
background: red;
width:50vw;
height: 700px;
}
.grid-stack-item-content {
color: blue;
text-align: center;
background-color: #18bc9c;
min-width: 100px;
width:100px;
}
JavaScript
var options = {
cellHeight: 210,
margin: '5px',
disableResize: true,
disableOneColumnMode: true,
column: 4
};
var grid = GridStack.init(options);
var count = 0;
var items = [
{autoPosition: true, w: 1, h: 1},
{autoPosition: true, w: 1},
{autoPosition: true, h: 1},
{autoPosition: true, w: 1},
];
addNewWidget = function () {
var node = items[count] || {
x: Math.round(12 * Math.random()),
y: Math.round(5 * Math.random()),
w: 1,
h: 1
};
node.content = String(count++);
grid.addWidget(node);
return false;
};
$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd'); // evento cambiar tamaño pagina
}, 500);
});
$(window).bind('resizeEnd', function () {
if (grid.cellWidth() < 100) {
let numOfCol = parseInt(grid.getColumn()) - 1;
if (grid.getColumn() < 3) {
grid.opts.oneColumnModeDomSort = true;
grid.column(1, 'none');
} else {
grid.column(numOfCol - 1, 'none');
$(window).trigger('resizeEnd');
}
} else {
let gridwidth = $(".grid-stack").width();
let ncolumns = Math.floor(gridwidth / 100);
if (ncolumns > 12) {
ncolumns = 12;
}
grid.column(ncolumns, 'none');
}
console.log("xw")
});
addNewWidget();
addNewWidget();
addNewWidget();
addNewWidget();
addNewWidget();
addNewWidget();