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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.all.js"></script>

<div class="container-fluid">
  <h1>gridstack.js base demo for issues</h1>
  <div>
    <span>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js.</span>
  </div>
  <br/>
  <br/>
  <div class="grid-stack" id="right-grid">
    <div class="grid-stack-item">
    <div class="grid-stack-item-content"><button id="button1">button1</button></div>
    </div>
  </div>
   <br/>
  <br/>
  <div class="grid-stack" id="left-grid">
    <div class="grid-stack-item">
    <div class="grid-stack-item-content"><button id="button2">button2</button></div>
    </div>
  </div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

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

JavaScript

$(function () {
  var options = {
    acceptWidgets: true
  };
  $('#right-grid').gridstack(options);
  $('#left-grid').gridstack(options);
  
  function pressed1(){
  	$('.container-fluid').append("button 1 pressed ");
  }
  
  function pressed2(){
  	$('.container-fluid').append("button 2 pressed ");
  }
  
  $('#button1').click(pressed1);
  $('#button2').click(pressed2);
});