0

I've implemented a kanban board with react-beautiful-dnd. It works the way I want.

I would like to be able to use this board inside a div container that has overflow: hidden. However, doing so prevents from dragging Cards in columns that are outside of the viewport, the screen does not scroll horizontally to the right anymore.

I'm simplifying the issue, the reason I need this is because I'm using a Layout component which content component is a div with overflow: hidden.

Here is a codesandbox that demo the issue

Basically, this works, I can drag-drop Card to the right and it will scroll horizontally :

<div style={{ overflow: 'unset}} >
    <Kanban />
<div>

This does not:

<div style={{ overflow: 'hidden }} >
    <Kanban />
<div>

Maybe there is a way to reset the first div as such?:

<div style={{ overflow: 'hidden }} >
    <div style={{ }}> // something here to reset container div?
        <Kanban />
    </div>
<div>
Greg Forel
  • 2,199
  • 6
  • 25
  • 46
  • Have you found a solution to this? – Sami Al-Subhi Jul 17 '20 at 09:30
  • I did, but not with `react-beautiful-dnd`. It's a pity. I ended up using `@richardrout/react-smooth-dnd`, and when importing `import { Container } from '@richardrout/react-smooth-dnd'`, use it this way: `` – Greg Forel Jul 17 '20 at 10:57
  • It's a branch of `react-smooth-dnd`. You'll have all the doc there: https://github.com/kutlugsahin/react-smooth-dnd – Greg Forel Jul 17 '20 at 11:04

0 Answers0