tile position calculation is broken

[TrejGun]

from #520

When an element of a row is moved to an upper one, get a overflow

the problem is seen only on certain conditions.
here is my code https://codesandbox.io/s/w68jykzw58 showing the bug you can fix it by removing overflowX: "hidden" from the wrapper

[keyranova]

I have a parent container that needs overflow: auto and the same issue happens.

[crapthings]

i have position calculation problem too, what is wrong here?

https://streamable.com/rmp97

[crapthings]

okay its something like this

atlassian/react-beautiful-dnd#352

grid layout

const SortableList = SortableContainer(({items}) => {
  return (
      <div className='page-grid'>
        {items.map((value, index) => (
          <SortableItem key={`item-${index}`} index={index} value={value} />
        ))}
      </div>
  )
})

.page-grid
  flex 1
  display grid
  grid-template-columns: 1fr 1fr 1fr 1fr
  grid-gap 32px
  padding 32px

[knarkunas]

@crapthings - when drag occurs, it adds translate3d(AAApx, BBBpx, CCCpx) where AAA is your grid element width. What happens is that when calculating how much it should add to transform, it does not account for grid-gap. I've found that it can be fixed by adding padding inside your grid element instead of convenient grid-gap.

Same happened to me 😢

[superdc]

I have a parent container that needs overflow: auto and the same issue happens.

I have the same problem, how to fix it? Help wanted

[knarkunas]

@superdc use this for guidance: #577

Or use version 1.7.1 as a quick fix. Just let's hope later versions did not add what you might need.