-
-
Notifications
You must be signed in to change notification settings - Fork 217
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The grid
prop doesn't account for grid gaps
#822
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This can be considered both a bug and a feature request.
Overview of the problem
I'm using re-resizable version [6.9.17]
My browser is:
Firefox, Chrome, Safari
I am sure this issue is not a duplicate?
Description
Basically, I was given a design for a grid that will contains draggable/resizable items. The design for the grid contains these grid cells in the background to which the resizable/draggable item will snap to. Here is a screenshot from the Figma design:
As you can see from the screenshot, the items will span
hSpan * (gridCellWidth + gridGap) - gridGap
, So the width of the item will always be one gridGap less than the gridCellWidth amount. Now, since I still need the items to resize bygridCellWidth + gridGap
to account for the gaps, I provided the grid prop withgrid={[gridCellWidth + gridGap, gridCellHeight + gridGap]}
this works fine, as it actually resizes by the correct amount. But, at the start of the resize action, since the width of the item doesn't include that last gap, it will immediately snap 3px horizontally and 3px vertically. Then, the grid calculations go from there, so it is always off by 3px. When the resizing ends, I can just adjust the actual size, but this causes a UI bug for the users that doesn't look great.
Steps to Reproduce
2 * (gridCellWidth + gridGap) - gridGap
https://playcode.io/1916463
Feature request
I think a good feature would be to add an optional prop that would allow you to pass in a grid gap. If this is set, then the resizable would handle the gap accordingly.
The text was updated successfully, but these errors were encountered: