Vue-grid-layout: Overlap issue of responsive layout

[yzhang921]

Hey, looks like there is an issue of responsive layout feature.
"vue-grid-layout": "^2.3.1",
Version 69.0.3497
os: macOS High Sierra
Look forward to your reply

[Pwntus]

There are all sorts of issues with the responsive layout.
Resizing grid items is very laggy and items will sometimes get wrong size when the mouse is released.

[Endebert]

make sure that the layout property is synched, i.e.:

    <grid-layout
      :layout.sync="widgets"
      ...
    >

adding .sync fixed the overlapping issues for me

[Mayank-jain34]

I am also facing the same issue. Can anyone please look into it.

[Safirion]

Responsive layout has big issues :

[Safirion]

Seems to be caused by layouts not clear in GridLayout ;)

Fixed by reset lastBreakpoint and layouts on change responsive mode or adding items :
lastBreakpoint = null;
layouts = {};

[sogehige]

Seems to be caused by layouts not clear in GridLayout ;)

Fixed by reset lastBreakpoint and layouts on change responsive mode or adding items :
lastBreakpoint = null;
layouts = {};

Can you show demo example?

[heyddi]

Hi @Safirion,

Yes please, do you have an example of this?

Thanks!

Ed

[mathewsjts]

Seems to be caused by layouts not clear in GridLayout ;)
Fixed by reset lastBreakpoint and layouts on change responsive mode or adding items :
lastBreakpoint = null;
layouts = {};

Can you show demo example?

I fixed doing the same thing he mentioned, getting this properties fetching the grid-layout with ref

<grid-layout ref="gridLayout"> </grid-layout>

and on mounted event I called this method

resetGridLayout() { this.$refs.gridLayout.lastBreakpoint = null this.$refs.gridLayout.layouts = {} }

[mattgreenfield]

I was having this issue due to externally updating layout multiple times when mouted. See here
https://github.com/jbaysolutions/vue-grid-layout/issues/269#issuecomment-617639202

[shaks786]

I was having this issue due to externally updating layout multiple times when mouted. See here
#269 (comment)

Did you manage to find a workaround?