Coder Social home page Coder Social logo

Comments (10)

jay0815 avatar jay0815 commented on June 12, 2024 4

@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.

artem-malko avatar artem-malko commented on June 12, 2024 3

@jay0815

By the way, if you set padding to [0, 0] — everything will work great)

from react-grid-layout.

sikhaman avatar sikhaman commented on June 12, 2024 1

@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.

jay0815 avatar jay0815 commented on June 12, 2024

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.

artem-malko avatar artem-malko commented on June 12, 2024

@jay0815 hey, could you describe your patch? What did you do?

from react-grid-layout.

jay0815 avatar jay0815 commented on June 12, 2024

@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.

artem-malko avatar artem-malko commented on June 12, 2024

@jay0815 thx a lot, will be waiting for review and release

from react-grid-layout.

sikhaman avatar sikhaman commented on June 12, 2024

have same issue, isBounded works very weird with or without paddings

from react-grid-layout.

nlevos avatar nlevos commented on June 12, 2024

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.

MrZhouZh avatar MrZhouZh commented on June 12, 2024

Have some issue, THX a lot.

from react-grid-layout.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.