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

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

Open
NainikYork opened this issue Mar 14, 2024 · 0 comments

Comments

@NainikYork
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant