React-beautiful-dnd: How to autoscroll in DragDropContext (with multilist)?

Created on 28 Nov 2019 · 13Comments · Source: atlassian/react-beautiful-dnd

I have around 10 columns as <Droppable />.

Expected behavior

The container of columns <Droppable /> has to auto scroll to the right when I reached right side of the window with my <Draggable />.

It works great within a <Droppable />: When I reach the bottom of the column <Droppable />, it auto scrolls to the bottom.

The idea is to do something like this :
https://user-images.githubusercontent.com/2182637/36520670-57752526-17e6-11e8-95b3-b5a3978a5312.gif

Actual behavior

When I reached the right of the window or the container of Droppables, it's not auto scroll to the right.

But I see we can scroll _manually_ by trackpad. (that's a good thing).

The problem is more important on iOS. I have to Drag and drop to the next column until I reach the last column (at right, at the end of the container).

Console Log

react-beautiful-dnd.esm.js:44 react-beautiful-dndDroppable: unsupported nested scroll container detected.A Droppable can only have one scroll parent (which can be itself)Nested scroll containers are currently not supported.

I guess is because each of my <Droppable /> is using "overflow: auto"

What version of `React` are you using?

    "react": "^16.6.3"

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

    "react-beautiful-dnd": "12.1.1"

What browser are you using?

Chrome, Safari, Safari iOS

more information required

Source

Steffi3rd

❤1

Most helpful comment

I don't know if what i did solve this problem but, instead of set a

after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

kaue-esparta on 19 Mar 2020

👀1 ❤1 🎉1 👍1

All 13 comments

Also have this issue. Its a limitation of rdb's current autoscroll implementation. More info on #131. I just removed the scroll containers on my lists for the time being.

joziahg on 9 Dec 2019

Hi @Steffi3rd,

Thanks for raising this issue. Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Cheers 😄

danieldelcore on 10 Dec 2019

Do you see any warnings in your console? I suspect you have multiple scroll containers which is not supported yet

alexreardon on 9 Jan 2020

@Steffi3rd Hello! Have you been able to solve your issue? I am facing the same problem. Thanks!

gregoryforel on 12 Mar 2020

Any idea?

kaue-esparta on 19 Mar 2020

I read in other issues that this isn't possible. I'm switching to react-smooth-dnd.

gregoryforel on 19 Mar 2020

This is crazy! in the Storybook has this example:
https://react-beautiful-dnd.netlify.com/?path=/story/board--simple

It's works so great! Why in our situation doesn't? :S

kaue-esparta on 19 Mar 2020

The storyboard example does not implement overflow on columns. You can also read above, @alexreardon confirms this isn't implemented.

See this example

See #344, they explain a bit better why.

gregoryforel on 19 Mar 2020

@gregoryforel Thanks for your help!

kaue-esparta on 19 Mar 2020

I don't know if what i did solve this problem but, instead of set a

after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

kaue-esparta on 19 Mar 2020

👀1 ❤1 🎉1 👍1

@kaue-esparta I'll try that solution. Thank man.

Steffi3rd on 19 Mar 2020

@kaue-esparta I'm not sure I got it. Could you try in the codesandbox I posted please?

gregoryforel on 20 Mar 2020

I don't know if what i did solve this problem but, instead of set a

after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

not work