35
Views
1
Comments
[Drag and Drop] Issues with Drag and Drop when using CSS Overflow scroll
Question
drag-and-drop
Web icon
Forge asset by Ruben Goncalves

My use case is that I want to assign User Stories to a specific Releasenumber. I would like to do this by using drag and drop functionality.

I have a recordlist(left) with user stories without a release. And another recordlist(right) with stories that are linked to specific releasenumber. When dragging a user story without a release to the right recordlist, the ReleaseId is given to that particular story and disappears from the left recordlist.

In practice the left column will have a lot of records and thats why I would like to use a scrollbar to go through the recordlist. But when using CSS overflow the following issue occurs:

CSS used:

.ContainerVerticalScroll {
    overflow-y: auto;
    height: 200px;
}

I attached the OML file

Environment used:

Outsystems 11 - Traditional Web

Hopefully someone can help me finding a solution.


Regards,

Antonio

DragDropOverflow.oml
2020-08-05 08-52-58
Ruben Goncalves

Hi Antonio,

The problem appears to be related with your overflow-x:hidden, that is commented in your class:

.ContainerVerticalScroll {
    overflow-y: auto;
    /*overflow-x: hidden;*/
    height: 100px;
}

By adding it, it stops being a problem.

Regarding overflow-y: autoI've noticed that it causes problems. My bet is that you might not be able to use it at the moment.

Not sure, if this helps you out...

Cheers,

RG

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.