atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

Home Page:https://react-beautiful-dnd.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setting position issue -- When the page is scroll with position: Sticky, The drag component is not positioning properly.

NainikYork opened this issue · comments

Bug
I have a sidebar in position sticky, inside is a Droppable and inside some Draggables.
This is the CSS of the sticky container :

display: flex;
flex-direction: column;
position: sticky;
top: 70px;
right: 0;
height: calc(100vh - 70px);
max-width: 90px;
In there I have a Droppable with overflow: auto and a max-height: 84vh
And in there some Draggables that can be reorganised by drag-n-drop.

Expected behavior
When I move a Draggable near the edge of the Droppable container, it would automatically scroll the Droppable container with overflow: auto

Actual behavior
When I move a Draggable the window starts scrolling, the Droppable doesn't scroll at all, even when I reach the end of the window scroll, I still can't make my container scroll.

What version of React are you using?
16.4

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

What browser are you using?
Chrome 69

Demo
Demo
The weird thing is, this seems to be an edge case with the height of the container, if you change 90vh to 50vh, it works as expected.

And in my case, I need to have my sidebar sticky and taking full height of the viewport - my header's height.