Skip to content
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

Transform of dragged elements causes overlap of adjacent content #1644

Closed
ohepworthbell opened this issue Sep 23, 2019 · 2 comments
Closed

Comments

@ohepworthbell
Copy link
Contributor

ohepworthbell commented Sep 23, 2019

Problem

When a sortable element is dragged, an attribute of transform: translateZ(0) is added (looks like to fix an old rendering issue in Chrome - #1276); however, when the element is dropped this attribute is not removed, resulting in any absolutely position children of the draggable element (such as a tooltip) that extend past their parent's bounds to be overlapped by any following dragged/draggable elements.

To recreate

https://jsfiddle.net/4kcbzLse/

  1. Add 2-3 list items using button
  2. Drag a list item to the top
  3. Hover over tooltip on the right of dragged list item
  4. Observe how border of following item overlaps

Fix is very easy - just need to add a line:

css(dragEl, 'transform', '')

To line 1353 of ./src/Sortable.js (within the _onDrop: function() { ... } call). This will remove the attribute again once an element has been dropped.

Tested locally and fixes the issue for me, though to be clear - I have not experienced the issue #1276 myself, so not sure if this will cause conflicts with that. Might be worth further testing

@ohepworthbell
Copy link
Contributor Author

Should add: happy to do a PR, though given further testing is required might be best if someone who is familiar with original issue has a look?

@owen-m1
Copy link
Member

owen-m1 commented Oct 12, 2019

Merged PR in e979370

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants