React-grid-layout: Doing relayout every time width changes - causes bouncing effect

[Noitidart]

Hi there, I don't mean to take advantage of you willing to answer users questions. You gave lighting fast responses this morning. But I was having issues I couldn't overcome.

As I have a responsive width, it follows that on resize of the window obviously the width changes.

Now my issue is, my height of each grid-item is dictated by the width of each element. My rowHeight is 1 and then I set the height in each layout to be the height of the image. So in other words, I recaclulate the layout everytime the grid width changes. Things look ok, until I add transition effect to transform. This causes the transition to start from the non-responsively adjusted spot each time.

Demo is here - https://noitidart.github.io/nativeshot-react-grid-layout/demo/demo.htm

And here is a screencast showing the issue (my audio in this screencast is funky):

https://www.youtube.com/watch?v=EO_1QTfCR_I

[sirajul147]

@Noitidart I'm getting the same issue, when i change the height, width unwantedly switches to wrong values, Where you able to fix this issue?

[Noitidart]

@sirajul147 I actually had too many issues with this module. I was going for simple masonry, I ended up rolling my own solution with two days. I wish I could give better advice here :(

[sirajul147]

@Noitidart After looking into the issue for a long long time, I figured out this was caused due to a CSS override. Yes with your advice I feel I'll have to modify the library to suite my needs or work with my own solutions. Thanks for the response. :)

[Noitidart]

Thanks @sirajul147 for your comment! :) See you get same result makes me feel 'yes I also tried and I didnt give up'. :)

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days