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

Styling draggable item with both margin top and bottom will cause uneven gaps in the placement #953

Closed
ayushkamadji opened this issue Nov 24, 2018 · 1 comment

Comments

@ayushkamadji
Copy link

Bug or feature request?

Bug

Expected behavior

When an item is dragged from a list, the other items should move around it with equal margin/spacing between them. Even when styled with both margin-top and bottom.

Actual behavior

When a draggable has both margin top and bottom styling, the offset calculation is off. This results in items being nudged either up or down from their ideal position. This is probably related to #201, but this isn't only with keyboard dragging.

Steps to reproduce

  1. Have the usual minimal setup for list item drag and drop.
  2. Style the list item with a margin top and bottom
  3. Drag an item across the list to see uneven offset/spacing between items.

What version of React are you using?

16.5.2

What version of react-beautiful-dnd are you running?

10.0.2

What browser are you using?

Firefox 63.0.3 (64-bit) Windows 10

Demo

Sandbox

Demo sandbox

Animation

Pay attention to the gap between first and second item, and between the last and second last item
rbdnd-bug

@alexreardon
Copy link
Collaborator

Hi there, your example has issues because there is margin collapsing between the items. The is currently unsupported: https://github.com/atlassian/react-beautiful-dnd#unsupported-margin-setups

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