Resizing a tile over the bottom edge of the layout does not trigger a height increase of the dashboard

[lehnerchristian]

When I increase the height of a tile and move the cursor to the bottom edge of my dashboard the height only increases a little bit in Chromium based browsers and then stops. While I can sometimes reproduce this in Firefox it works way more reliably for me. The only way I can achieve this in Chrome is that I resize a tile until the dashboard increases a little bit, stop resizing, scroll down and then start resizing again.

Here's a Codesanbox link with a little example: https://codesandbox.io/s/chrome-rgl-scrolling-issue-hsr45?file=/src/App.js

I can also reproduce the same behavior in the simple demo example: https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html

Chrome (Sandbox example):

Firefox (Sandbox example):

Chrome (Simple demo example):

[fengbozhi]

I also encountered the same problem

[OFouda]

also running into this issue. any chance for an update here?

[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

[raymar]

I also have the same issue...anyone made a progress here?

[raymar]

I figured it out...basically you just need to make sure, that the scroll is going down while resizing ;)

[lehnerchristian]

Hi @raymar ! Can you go into a little bit more detail how you solved it? Did you simply use window.scrollBy(x, y) in the onResize or onResizeStart callback? I'm sure this will also help others having the same issue :slightly_smiling_face:

[Junghoon-P]

Hi @raymar ! Can you go into a little bit more detail how you solved it? Did you simply use window.scrollBy(x, y) in the onResize or onResizeStart callback? I'm sure this will also help others having the same issue 🙂

Hi @lehnerchristian . I recently had the same problem. I solved the problem a while ago. To share, use onResize. When onResize is working, just add a window size and ref to the component being resized to compare the height(getBoundingClientRect().bottom) value of that component and hang a scrollBy event.