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.