Overlapping issues caused by "add_widget"

[simplenotezy]

For a very long time I been fighting against the overlapping issues on gridster. I feel stuck. I have tried everything. The startup I am in is very dependent of the gridster, as it is our only really selling point for our clients ("get a nice drag'n'drop profile"). Please, if you have ANY suggestions, let us know.

We are currently v0.5.1.

I have tried to narrow down the problem. I have concluded which line seems to produce the error, which is: add_widget();

The grid looks like this:

When calling this function:

gridster[current_grid_id].add_widget('<li class="typeAddNew addNewWidget addWidgetButtonBox"><div class="boxContent"><div class="addNewTitle">Opret ny boks</div></div></li>', 1, 7);

It looks like this (exactly as it should. Added to bottom, and still in grid):

As soon as I call it a once more, the grid boxes will be messed up. See:

I noticed that on first time i run it, the added grid box has “data-row” set to “29”. The second time I run the function, the added grid box has “data-row” set to “17”.

See:

Also, when calling $(‘.addNewwidget’), I notice that the ‘data-row’ has changed to “24" (originally “29”). See:

Any ideas? I am lost.

If you're curious and like to see it for your self - let me know - I'll can give you a test account, where you can experience the issues for your self.

[codespore]

@canfiax let me know if it fixes your problem. I had the same issue and it fixed mine.

[simplenotezy]

Hello Adrian! We're very happy to see your interest in helping out on the issue.

I copied this file and replaced it with the original gridster.js: https://raw.githubusercontent.com/AdrianTeh/gridster.js/72669b0cf6ae5370c1f6624fb7c74e11e6f3a3ee/dist/jquery.gridster.js

However, it caused the page to "crash". It would simply not load, and Chrome would say the page is not responding.

I have created an example for you to see.

The gridster (with overlapping issues):
https://edukarma.com/profile/uc.syddanmark/medie.og.sonokommunikation.lyddesign

The gridster with your update:
https://edukarma.com/profile/uc.syddanmark/medie.og.sonokommunikation.lyddesign&gridster2

[codespore]

@canfiax Looking at the 1st link you provided, I do not see any overlapping issues, unless I'm looking at it wrongly. As for the crash, I don't think the minor update would have caused the issue. It's working well on my app using the fix. Make sure you are using both the latest JS and CSS dist files.

Hope you get your problem fixed soon :)

[simplenotezy]

Hi Adrian!

The update you sent really does trigger the error.

try to reproduce the problem as described in top of the thread. That is how they get to overlap.

The grid I sent you is simply a lucky way we found, where they do not overlap. As soon as you begin dragging, they'll overlap.

[codespore]

@canfiax I suggest you setup a mini testing site that uses the gridster.js with the new fix I've added. Try and see if it works / crashes. It works well on my side and other sites as well. It might be the way you're adding the widgets or the configurations you've set on the plugin.

The fix i've posted only fulfills what the plugin function require on line 1050:

this.add_faux_rows(pos.size_y);

The rest is as per the plugin.

A fix, might have reveal problems in other areas that might not have occurred, before the previous fix :)

[simplenotezy]

I have narrowed down the problem. This line:

gridster[current_grid_id].add_widget('<li></li>', 1, 7);

Produces a heavy amount of lag. Like seriously a lot.

EDIT: Trying without the X and Y coordinates, it does not lag. Hmmm.
EDIT: Created seperate issue here: #412

UPDATE 2: I have tried running

gridster[current_grid_id]

in console, to see the difference. They are quite different. Maybe it can help you. I have created an image here - the red marks highlights the difference between the working/nonlaggy version and the new one.

When running

gridster[current_grid_id].add_widget('<li></li>', 1, 7);

In 'gridster2' faux_grid changes from:

faux_grid: Array[471]

to

faux_grid: Array[4731]

This seems to be what is causing the lag. (In the 03-13-2014 version, it changes from "faux_grid: Array[69]" to faux_grid: Array[90]" which is WAY lower.)

[husfeldt]

I think I have the same issue I also use add_widget, and it seems that at some point during this process vertical positioning goes all wrong..
What I have noticed however is that if I always use row=1 (and thus are unable to control row placement) overlap does not happen..
Also I have seen some insane high row-numbers getting generated much like described above..
I suspect something goes wrong in empty_cells function .. but I am just guessing..

[husfeldt]

Update (work around)..
I have added a call to add_faux_rows(some_large_number) in the creation of gridster, before adding the widgets.
This seems to solve my problem.. but not THE problem I guess ..

[rept]

I just commited a pull request: #426 which solved my problem: (#425). I also experienced lots of lags, after this change it flies again :-)

To try it out:

Change:
var max_rows = actual_rows + (rows || 1);
into
var max_rows = actual_rows + parseInt(rows || 1);

in the function add_faux_rows. Let me know your results.

[simplenotezy]

This fixed the issue for us!! Great!

[rept]

@canfiax Good to hear, hope it gets pulled soon.

[deepthiyakkala]

Hello All,

Even i have the same widget overlapping issue.overlapping is happening when i am trying to add widgets of different sizes at the same time. tried using faux parseInt ,it doesn't work for me. Any solutions are appreciable.

[mjfitzge]

This is definitely still a problem. Adding widgets currently causes the browser to freeze for me when re-adding serialized widgets.

[simplenotezy]

@mjfitzge try @rept Solution. Fixed it for me