0

I'm working on a task boards project.

Everything worked ok until I restricted the board area (columns of tasks) to open additional window (a right sidebar for editing tasks). To do that, I just added width: calc(100vw - 672px); to the scrollable board area.

After that drag and drop of columns stopped working correctly. It's possible to drag every column, but you can only drop between first few columns (to the place where the view is restricted by width. After drag two columns start overlapping - about the same place) In the inspector I can see the message: You are over an area that cannot be dropped on - it is the same board area, just scrolled to the right.

I'm using react beautiful drag and drop.

What can I do to debug this further? I'm out of ideas of what might be causing it.

I already checked that this one change is causing weird behavior. Without opening the sidebar or conditionally changing the board area it is still not working.

sswwqqaa
  • 1,545
  • 3
  • 15
  • 29

1 Answers1

0

Solution was very simple (searched for it for a long time before publishing question, I wouldn't think that it could be that simple):

Don't restrict the board area directly in the parent, create additional parent on top of Droppable and DragDropContext to restrict it as a whole so everything is recalculated correctly.

sswwqqaa
  • 1,545
  • 3
  • 15
  • 29