react-grid-layout icon indicating copy to clipboard operation
react-grid-layout copied to clipboard

Published 20 hours ago • verified publisher icon react-grid-layout

measureBeforeMount breaks responsive grid layout

Open sajinshrestha opened this issue 9 months ago • 14 comments

Describe the bug

If measureBeforeMount is set totrue, all grid items within a responsive grid (WidthProvider) will have an x value of '0', causing them to be rearranged into a single column.

Your Example Website or App

https://codesandbox.io/s/hardcore-snowflake-mx8gnp?file=/src/ShowcaseLayout.js

Steps to Reproduce the Bug or Issue

  1. Go to https://codesandbox.io/s/hardcore-snowflake-mx8gnp?file=/src/ShowcaseLayout.js
  2. Compare layouts when measureBeforeMount is set to true vs false

Expected behavior

WithProvider to correctly set the width of the grid container.

react-grid-layout library version

1.4.1

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

sajinshrestha avatar Sep 15 '23 18:09 sajinshrestha

I've experienced the same issue on my project.

crklan avatar Sep 22 '23 13:09 crklan

Yes I am also facing the same issue

manaschubby avatar Oct 02 '23 16:10 manaschubby

Also facing the same issue.

nick-shogun avatar Oct 11 '23 19:10 nick-shogun

Same here

rene-stesl avatar Oct 13 '23 13:10 rene-stesl

Experiencing the same as well

MYKEU avatar Oct 21 '23 23:10 MYKEU

Also experiencing the same issue. We are unable to squelch the initial flow animation.

jaikamat avatar Oct 23 '23 13:10 jaikamat

Any movement on this? It basically breaks my app.

pariah140 avatar Oct 27 '23 10:10 pariah140

any update?

abdalla-rko avatar Nov 20 '23 18:11 abdalla-rko

+1

taochu avatar Dec 13 '23 12:12 taochu

have anyone got the solution for the above issue pls share if any solution 1)Also got same issue after setting the "measureBeforeMount" to false it is working as expected but the data is not rendering in it.

vinaymane01 avatar Jan 25 '24 09:01 vinaymane01

downgraded to 1.3 fixed the issue

muhajirdev avatar Jan 26 '24 14:01 muhajirdev

I ran into this issue, too. I am not completely sure how this can be fixed. But I think I understand what is causing this: The ResizeObserver used to track size changes of the container in the HoC WidthProvider is installed on the placeholder div when measureBeforeMount is specified. This div is however removed from DOM while the ResizeObserver is still attached, this causes a change to width = 0.

Solution would be to detach the ResizeObserver before the div is removed. And attach it later to the correct elementRef again when the ComposedComponent renders.

Hope this helps somebody who can fix it.

nil-s-s avatar Jan 26 '24 15:01 nil-s-s