smooth-dnd icon indicating copy to clipboard operation
smooth-dnd copied to clipboard

Published 20 hours ago • verified publisher icon kutlugsahin

Scrolling within vertical containers

Open richrout opened this issue 6 years ago • 7 comments

Hello!

I have a trello-ish "task" system, and when I try to add "overflow-y: auto" on my "lane" to make it scroll independently (aka not with the whole page) - this breaks the functionality when you drag an individual card across the screen. It will not scroll the whole page if the card is over a lane towards the edge of the screen. Moving it out of the lane will scroll the page like normal.

Can provide more information/reproduction if it is needed. But any ideas if there is a work around for this? Or if this should work?

richrout avatar Jul 21 '19 23:07 richrout

This is reproducible if you just add the following styles to the .smooth-dnd-container on the demo page.

    max-height: 400px;
    overflow-y: auto;

image

Try dragging a card towards the left/right side where it should start scrolling, instead it does nothing.

image

richrout avatar Jul 27 '19 14:07 richrout

yep i got the same issue =(( Can't scroll if we set max-height for the column could you hot fix? @johanneswilm @richrout @klaasman @kutlugsahin

HoaDevDn avatar Feb 04 '20 04:02 HoaDevDn

Hello @johanneswilm , @richrout , @klaasman @kutlugsahin ! A gentle bump, in case any of you has some time to look into this issue. Many thanks in advance in any case, and thanks for the library!

gregoryforel avatar Mar 21 '20 13:03 gregoryforel

I have a pull request that I tested and works for the "Trello scenario"

No one has looked at the PR though: #55

richrout avatar Mar 21 '20 14:03 richrout

Thanks @richrout ! 3 questions if I may:

  • "puts the onus on the consumer to set up their UI in a way that overlaps are easy to navigate": do you actually have anything in particular to do other than properly setting up your CSS correctly and setting disableScrollOverlapDetection to true?
  • Any idea how the guys who created react-trello did it? They do use react-smooth-dnd, and their lib works.
  • Do you have a working repo with your solution that demos your work that I could check?

gregoryforel avatar Mar 21 '20 14:03 gregoryforel

For sure.

  • yeah that's all it means.
  • they use a fork now. I don't think this was a problem until the "overlap scroll detection" was added.
  • nothing right now. I had quickly modified it on the demo page to show it in the screenshots above. Lemme know if you want me to create something, or even a separate demo page to show how to do it.

richrout avatar Mar 21 '20 15:03 richrout

No need to demo. Thank you so much! It works like a charm. Maybe you can bump the guys ref your PR again? So many people have the same issue.

gregoryforel avatar Mar 21 '20 15:03 gregoryforel