Comments (10)
@artem-malko here is my patch. [email protected]
I noticed that in the update from 1.4.3 to 1.4.4, commit #1323 added a calculation for the offset of containerPadding to the top and left properties, which affects the final position of the item. However, I found that calcXY already includes the handling of containerPadding.
Of course, this is a temporary solution, as it's just a rollback of that part of the calculation logic. Once I fully understand the entire logic of the position calculation, I might submit a PR to truly solve this issue.
from react-grid-layout.
By the way, if you set padding to [0, 0] — everything will work great)
from react-grid-layout.
@nlevos I also had thoughts to revert a version back, but want to wait an updates. I fixed issue by set up containerPadding={[0, 0]}
as @jay0815 suggested. But this is just a patch, so waiting for the fixes and new version release
from react-grid-layout.
I updated to version 1.4.4 and also encountered the same issue. Through debugging, I found that it was due to the changes in the logic for calculating top and left in #1323 . The key issue was caused by the containerPadding. I locally patched the previous version of the GridItem file to fix it.
from react-grid-layout.
@jay0815 hey, could you describe your patch? What did you do?
from react-grid-layout.
@artem-malko hello,i have submitted a PR to fix the current bug.
In commit #1323, the author sought to correct an issue where ignoring the containerPadding attribute led to incorrect calculations of the final X/Y positions.
However, the fix was too simplistic and failed to take into account that, within the current library, the positions obtained during onDrag are already the outcome of calculations that incorporate the effects of both margin and containerPadding into the top and left values.
ContainerPadding is effectively equivalent to margin, because when containerPadding is not provided, margin is automatically used as the default for containerPadding. The reason why your provided containerPadding of [0,0] seems to work correctly is because, precisely at the [0,0] position, the calculation results from the current logic align with those from the correct calculation method.
from react-grid-layout.
@jay0815 thx a lot, will be waiting for review and release
from react-grid-layout.
have same issue, isBounded
works very weird with or without paddings
from react-grid-layout.
Hi guys, I have the same problem. On dragging the block moves by itself to position 0,0.
I reverted to v1.4.3 and it works as expected!
from react-grid-layout.
Have some issue, THX a lot.
from react-grid-layout.
Related Issues (20)
- Using with Nextjs 14 HOT 3
- [rtl resize] In RTL resize, when I try to shrink it, it gets bigger instead
- Race condition on React 18 setState causes mouse to "skip" when dragging / resizing. HOT 7
- Positioning and Resizing does not work as intended in production mode HOT 2
- The performance of the grid layout is adversely affected when dealing with large SVG grid elements (size ≥ 1MB). HOT 5
- Setting item height based on rowHeight in OnResize is buggy HOT 1
- The x,y coordinate of the item is incorrect
- When columns are thin and column spacing is set, items move from their grid position when clicked HOT 3
- Issue with Red Color Popover on Item Click in Versions 1.4.3 and Above HOT 7
- [feature request] Drop onto another widget
- Dynamic static changes on children do not change children rendering HOT 3
- Grid item shifts leftward unexpectedly when dragging leftward resize handle.
- Responsive Grid Layout not working.. HOT 2
- React-grid-layout, antd dynamic form list HOT 1
- Upgrading dependencies causes react-grid-layout Responsive to crash with babel-loader error HOT 3
- Have errors in utils.js && ReactGridLayout.js HOT 3
- This repo should have updates for React 18+ HOT 4
- I have maxRows, but still its allow me to add more rows
- React 19 - Each child in a list should have a unique "key" prop. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-grid-layout.