10000 One pixel gap bug because Math.round when margin is zero · Issue #2141 · react-grid-layout/react-grid-layout · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

One pixel gap bug because Math.round when margin is zero #2141

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.

Sign up for GitHub

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

Jump to bottom
Open
ThomasChan opened this issue Apr 23, 2025 · 0 comments
Open

One pixel gap bug because Math.round when margin is zero #2141

ThomasChan opened this issue Apr 23, 2025 · 0 comments

Comments

@ThomasChan
Copy link
ThomasChan commented Apr 23, 2025 •
edited
Loading

Describe the bug

First of all, thank you for creating this library.

While using it, I noticed that when the margin is set to 0, there is sometimes a 1-pixel gap between elements. I checked the code, and this is caused by using Math.round when calculating element sizes.

I think there are two possible solutions to fix this:

  1. Adjust the final width/height when calculating element sizes based on the positions of adjacent elements. This requires first collecting information about which elements are adjacent to each other.
  2. Move the logic for calculating element sizes and dimensions to the parent ReactGridLayout, as the size and position of each element are already determined when setting the layout on the state.

Changes in position and size during element dragging or resizing do not need to be considered; even if there is a 1-pixel gap, it is acceptable.

Your Example Website or App

https://codesandbox.io/p/devbox/musing-fog-4xry6x?workspaceId=ws_UnDYrbNUVgpoqyCqFDXr7S

Steps to Reproduce the Bug or Issue

  1. Set margin to [0, 0]
  2. Set more items, such as 150

Expected behavior

Expected when the margin is set to 0, there should be no 1 pixel spacing between elements.

react-grid-layout library version

1.5.1

Operating System Version

macOS

Browser

Chrome

Additional context

No response

Screenshots or Videos

Image

Image
ThomasChan added a commit to ThomasChan/react-grid-layout that referenced this issue Apr 23, 2025
@ThomasChan
fix react-grid-layout#2141 One pixel gap bug because Math.round when …
3556729 
…margin is zero
@ThomasChan ThomasChan mentioned this issue Apr 23, 2025
Open
17 tasks
ThomasChan added a commit to ThomasChan/react-grid-layout that referenced this issue Apr 24, 2025
@ThomasChan
fix react-grid-layout#2141 One pixel gap bug because Math.round when …
f560da3 
…margin is zero
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ThomasChan
0