react-beautiful-dnd
react-beautiful-dnd copied to clipboard
atlassian
Dragging items horizontally across multiple columns doesn't scroll the screen if parent container is overflow: hidden and columns are scrollable
I've implemented a simple Kanban, with scrollable columns (overflow-y: auto)
I need to be able to drop this Kanban component inside container divs, one of those div has overflow: hidden set. When used this way, dragging items horizontally across multiple columns does not scroll the screen anymore.
I made a codesandbox to illustrate the issue.
When I remove overflow-y: auto;from .taskList inside styles.module.less, it works, even though the horizontal scrolling is much slower than I expect.
What am I doing wrong?
@alexreardon is this due to not supporting n-level nested containers? Thanks
Is the issue Solved?? As I wanted to know the solution of this
Unfortunately not.
I abandoned this library a while ago. It's a great library but falls short for this use case, and tbh, most do. The only one I found that worked for me is this react-smooth-dnd. But even this one, I had to use a specific branch, check this out.
Here's his branch
Use it like this when using the lib, in all the Containers:
import { Container } from '@richardrout/react-smooth-dnd'
return <Container
disableScrollOverlapDetection={true}
...>
// Your lists
</Container>
Same problem, but this example works fine, am I missing something?
https://user-images.githubusercontent.com/20528643/221157539-b0b81887-34eb-45eb-871b-427d66625fad.mp4
Same problem, but this example works fine, am I missing something?
Storybook.-.Google.Chrome.mp4
is there a way to get code of it
Same problem, but this example works fine, am I missing something? Storybook.-.Google.Chrome.mp4
is there a way to get code of it
i found this: https://codesandbox.io/s/react-beautiful-dnd-board-base-0dv9b
I was able fix it in mine. You have to allow html or browser to take care of scrolling or you should not have overflow on parent. then the autoscroll will work.
I was able fix it in mine. You have to allow html or browser to take care of scrolling or you should not have overflow on parent. then the autoscroll will work.
How?
