I actually just started using gridstack yesterday and came across what I believe to be this behavior. I'm sorry I can't produce a JSFiddle, but I can describe the code I'm using to produce this issue.

Edit: JSFiddle created in the next comment.

HTML/Jinja2

<div class="grid-stack">
  {%- for each_widget in widgets -%}
  <div class="grid-stack-item" data-custom-id="{{each_widget.unique_id}}" data-name="{{each_widget.name}}"
       data-gs-x="{{each_widget.position_x}}" data-gs-y="{{each_widget.position_y}}"
       data-gs-width="{{each_widget.size_x}}" data-gs-height="{{each_widget.size_y}}">

    <div class="grid-stack-item-content" style="display: flex; flex-flow: column; height: 100%; padding: 0.2em; border: 1px solid #ddd">

      <div class="text-right panel-heading" style="flex: 0 1 auto;">
        HEADER
      </div>

      <div id="chart-container-outer" style="position:relative; flex-grow:1">
        <div class="not-draggable" id="container-graph-{{each_widget.unique_id}}" style="position: absolute; left:0; top: 0; bottom:0; right:0; overflow:hidden;"></div>
      </div>

    </div>
  </div>
  {%- endfor -%}
</div>

Javascript

var options = {
  resizable: {
    handles: 'se, sw'
  },
  draggable: {
    handle: '.panel-heading'
  }
};
var grid = $('.grid-stack').gridstack(options);

grid.on('change', function (event, items) {
  var res = $('.grid-stack > .grid-stack-item:visible').map(function (i, el) {
    el = $(el);
    node = el.data('_gridstack_node');
    return {
      name: el.attr('data-name'),
      unique_id: el.attr('data-custom-id'),
      x: node.x,
      y: node.y,
      width: node.width,
      height: node.height
    };
  });
  $.ajax({
    url: "/save_dashboard_layout",
    type: "POST",
    data: JSON.stringify(res.toArray()),
    contentType: "application/json; charset=utf-8",
    success: function(dat) { console.log(dat); }
  });
});

The endpoint /save_dashboard_layout saves the position and size information to the database, which is pulled from the database and used in the above HTML upon loading the widget page:

2019-11-24 11:43:48,512 SAVED: {'name': 'Raspberry Pi Stats', 'unique_id': '89da9b34-74c2-4d93-ba56-8b9172e3b986', 'x': 0, 'y': 27, 'width': 12, 'height': 7}
2019-11-24 11:43:48,556 SAVED: {'name': 'Hydro Lab', 'unique_id': '49065829-9d96-4f2b-a37b-bfcf2692b629', 'x': 0, 'y': 20, 'width': 12, 'height': 7}
2019-11-24 11:43:48,597 SAVED: {'name': 'Container', 'unique_id': 'ba2ccf09-c4af-4932-bee4-cd0ee3199545', 'x': 0, 'y': 0, 'width': 12, 'height': 9}
2019-11-24 11:43:48,639 SAVED: {'name': 'Radiation', 'unique_id': '308de055-0ad7-42c5-b36b-31c89f570d34', 'x': 0, 'y': 14, 'width': 7, 'height': 6}
2019-11-24 11:43:48,675 SAVED: {'name': 'Mycodo Daemon RAM', 'unique_id': '639a06de-7fa9-4f43-ad67-e800b8421229', 'x': 7, 'y': 14, 'width': 5, 'height': 6}
2019-11-24 11:43:48,718 SAVED: {'name': 'Graph', 'unique_id': '9e2e46d8-82ac-4d14-a1d0-8adc598e2968', 'x': 0, 'y': 9, 'width': 12, 'height': 5}

Screenshot after moving/resizing to save data to database

Screenshot after reloading the page to load the grid from the database values

This issue doesn't present itself when I have the sizes small. I was only able to have it present itself in certain configurations. Let me know if I can provide anything else to better understand the issue. Thanks.

Uh oh!

Bug in positioning on version 0.5.2 #1054

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions