Gridstack.js: Bug in positioning on version 0.5.2

[sjacobi]

Grid change my "y" positioning, but its strange default behavior. This can be reproduced with a large number of elements in the grid.

[adumesny]

@sjacobi can you post a sample code showing the issue ? you're report is so generic I have no idea what to look for. thank you.

[kizniche]

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.

[kizniche]

I've distilled the HTML down to a more straightforward example in this JSFiddle.

[roldeguz]

Hi!

I've encountered a similar problem before, what I did was:

• Sorting the widgets (at the query level) by Y, X coords, at the point that its saved to a JS array, it is already sorted

• then setting data-gs-auto-position="0" when generating the widgets

Hope this helps.

[kizniche]

@roldeguz, I don't think that solves my issue. Gridstack should be placing my items at the positions specified. Additionally, I already have the items in the JSFiddle sorted from top-left to bottom-right (which I don't believe should be necessary anyway, given proper sizes/positions that don't overlap). If I'm misunderstanding your solution, could you please demonstrate with a modification of my JSFiddle?

[adumesny]

I recommend you take a careful look at the serialize demo https://gridstackjs.com/demo/serialization.html and https://gridstackjs.com/demo/float.html and/or simplify your sample way down. to just bare min with some CSS to tell the grid items apart.

2 things to keep in mind. grid with float=false (default) will push items to the top (gravity) when inserted, regardless on what you specify for Y. items without data-gs-auto-position=true will try to use x.y passed in - it's used as a hint to initially sort the items to be inserted. So in your DOM you have item 3 with y=0 and will therefore be inserted first (your first item has y=27 which is only a hint until gravity takes over, but will decide the insert order.

From a quick glance doesn't look like your layout is wrong, just confusing dom order vs actual Y value placement.

[kizniche]

and/or simplify your sample way down. to just bare min with some CSS to tell the grid items apart.

I made a simple JSFiddle with minimal HTML and Javascript.

[kizniche]

I see float: true fixes the layout issue, however I don't see why, even when sorted/inserted properly from top-left to bottom-right, the items become out of order when float is false.

[kizniche]

Thank you for the help. This is a great layout system. Perhaps I'm just misunderstanding how items are placed in the grid in relation to the order provided by the HTML.

[adumesny]

I have a fix (bug was introduced in 0.5.2) and will be in 0.5.4 if you can wait a few days...

[adumesny]

@kizniche thank you for spending the time showing the issue!

[kizniche]

You're welcome. I appreciate detailed bug reports, so I try to be thorough when I can. Thanks for the timely responses and fix.