On mobile screen: Grid items are stacked on top of each other

[glalithag3]

I'm getting the following error while testing on mobile screens (tested on Google Chrome with iPhone 6/7/8). Works fine for iPad tho!

Warning: Infinity is an invalid value for the height css style property. in div (created by TransitionGroup) in TransitionGroup (created by GridInline) in GridInline (created by SizeMeRenderer(GridInline)) in SizeMeReferenceWrapper (created by SizeMeRenderer(GridInline)) in SizeMeRenderer(GridInline) (created by SizeMe(GridInline)) in SizeMe(GridInline) (created by StackGrid)

[ohadorpaz]

happens to me also :-( any idea?

[ohadorpaz]

i've found a workaround for now, in which i just set a hook in the useEffect function and that causes it to render again correctly. Somthing like this:

const [renderHook, setRenderHook] = useState();
useEffect(() => {
    setTimeout(() => {
      setRenderHook(null);
    }, 0);
  }, []);

@glalithag3 I hope that helps you too until issue will be solved.

[marissawong]

i've found a workaround for now, in which i just set a hook in the useEffect function and that causes it to render again correctly. Somthing like this:

const [renderHook, setRenderHook] = useState();
useEffect(() => {
    setTimeout(() => {
      setRenderHook(null);
    }, 0);
  }, []);

@glalithag3 I hope that helps you too until issue will be solved.

Hi! How exactly did you use your renderHook state? Did you add it somehow to the elements or ? I'm having the same problem :/

[jnystrom]

I am getting items stacked even on laptop. The cards that I have in my grid are dynamic sized and part of it is a video component.