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?

[edouardgab]

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?

[nise]

So this seems to be a very old issue but the problem is still not solved in the current version. The method described by mathewsjts doesn't work. Setting layout.sync works neither.

any ideas?

[nise]

BTW https://github.com/gridstack/ have solved the issue.