Cards overlap after individual cards render

[JedKap]

I have this problem where the grid renders with a bunch of ReactStrap Cards, and then the bodies of each card finish rendering, and I wind up with overlaps. I see there is a way to monitor images but I need to updateLayout call after all the cards have finished rendering. Is there a way to do this?

Just to try to explain it a little better...

1. All cards are the same size and the grid renders them in order
2. Then the cards get their content (a list of items)
3. The grid doesn't updateLayout so the cards overlap.

Thanks,
JK

[irtiza07]

I am running into the same issue :( Did you ever manage to fix it?

[JedKap]

There were two things that I did.
My component is a functional component and I'm using hooks.
When updating the contents of the card I used useLayoutEffect instead of useEffect. The reason I used this was because each card generated a different height and I thought maybe that was the problem. That seemed to help.
The second problem I had was when the component that held the react-stack-grid wasn't wide enough for the cards. So I had to shrink the width of the cards when the browser was made narrower.
I hope this helps.
JK

[RT-TL]

@JedKap I am using the useLayoutEffect to trigger the updateLayout function but the content items still overlap. Did you come across any additional insights? At the moment the only thing that really helps is triggering the updateLayout after a generous timeout but this is of course not a very good or usable way to solve the problem.