Giters

react-grid-layout / react-grid-layout

A draggable and resizable grid layout with responsive breakpoints, for React.

Home Page:https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html

Repository from Github https://github.comreact-grid-layout/react-grid-layoutRepository from Github https://github.comreact-grid-layout/react-grid-layout

Setting item height based on rowHeight in OnResize is buggy

Tekunalogy opened this issue · comments

commented

Describe the bug

So, I am trying to have a layout where the CustomCard can be resized and dragged around, but the CardMedia (component within CustomCard) needs to have a 16:9 aspect ratio at all times. The CardContent (bottom section with text in the CustomCard) just needs to maintain whatever the height of the content is (which in this case, is always ~76px). Right now, I only have 2 Cards, but I want to be able to add any number of cards and they should all be spaced evenly (ideally like 10-20px gap).

I think I am calculating the grid item height (layoutItem.h) correctly, but for some reason, when resizing the card, the box size is completely wrong. The CustomCards are not supposed to overlap either, and that seems to be happening sometimes as well. Also, when the size of the window changes, the whole resizing is completely wrong again.

Also, the cards need to maintain a minimum pixel width of 460px, so the items should never be smaller than that and the handles shouldn't allow for anything smaller than 460px.

Also side-question: how do I change the size of the resize handle? I tried doing it via css, but it didn't seem to work properly.

Your Example Website or App

https://codesandbox.io/p/sandbox/dreamy-spence-vn58zq

Steps to Reproduce the Bug or Issue

  1. Go to the above sandbox
  2. Resize the card using the handle (on the right side of the CustomCard) to be as small as possible
  3. The first issue is: not being able to resize it to a larger size
  4. Refresh and try resizing the cards again
  5. The second issue is: the size of the cards is buggy and the gap between cards is too large and unpredictable.
  6. Refresh and try resizing the cards again
  7. The CustomCard can be resized smaller than 460px, or the preview box for resizing goes smaller than 460px
  8. Refresh
  9. Change the window size (to trigger different breakpoints)
  10. The third issue is: the cards are overlapping and/or size is completely incorrect.

Expected behavior

The behavior I am expecting is, regardless of the window size (at all breakpoints) the instances of the CustomCard components should all be evenly spaced, resizable so the CardMedia is at a 16:9 aspect ratio and the CardContent, and draggable for rearranging. The CustomCard components should also never be smaller than a fixed pixel width of "460px"

react-grid-layout library version

1.4.4

Operating System Version

Ubuntu 22.04

Browser

Chrome

Additional context

No response

Screenshots or Videos

Screencast.from.01-19-2024.01.54.22.PM.webm
commented

This issue is actually a misinterpretation of the library usage on my part. Not designed for "pixel" level resizing. I switched to react-rnd which works better for my use case. Apologies for the confusion.