gridstack widgets have a different order in mobile versus browser mobile view

[kavyabeerval]

Subject of the issue

gridstack widgets have a different order in mobile versus browser mobile view

Your environment

• using - gridstack.js 1.1.2, HTML5 and jquery 3.3.1
• chrome Version 88.0.4324.182

Steps to reproduce

MUST provide a working demo (keep it simple!) and steps, you can use this as a base:
https://jsfiddle.net/adumesny/jqhkry7g

Expected behavior

I want the same order which I see in my browser's mobile view to be on my actual phone. i don't understand why are they showing different orders.

Actual behavior

my problem: I have multiple widgets on my dashboard. when I access "mobile view" in "web browser", the order of widgets is the same as of browser order. But, when I actually open the website on my mobile phone the order is quite different from the mobile view in the browser.

[adumesny]

I think this got fixed by #1617 - please wait for next release v4 and re-open if still an issue.

[mvaessen]

While this was fixed for general cases, it wasn't working for my particular situation. Posting this to hopefully save someone else some time.

I'm using a somewhat hacky setup where I load existing grid items in by adding (grid.addWidget()) them instead of using the grid.load(). In my particular case this was better suiting.

Fake-it-till-you-make-it
First initiate Gridstack with float: true, then load in the items and then turn off float.
The reason why this works is because without float enabled it will ignore existing positions as it adds items relative. With float the positions are absolute, thus keeping the original sort order.

init: function(elm) {
      this.grid = GridStack.init({
          minRow: 1,
          alwaysShowResizeHandle: 'mobile',
          cellHeight: '100px',

          resizable: {
              handles: 'se, sw'
          },
          draggable: {
              handle: '.drag-handle',
              appendTo: 'body'
          },
          float: true
      });

      this.loadExistingItems(elm);

      this.grid.float(false);
  },

[adumesny]

@mvaessen no the problem is that you need to call batch() around if you are going to call a bunch of addWidget() instead, otherwise float=false will move afetr each add instead of loading them all at once, and doing at the end (what youa re doing with float=false at the end.

Anyway, can you post a bug sample like #1617 did so we can fix it the proper way ? no reason to 'hack' it around...