[Drag and Drop] Issues with Drag and Drop when using CSS Overflow scroll

Forge Component
(9)
Published on 2018-10-30 by Johan den Ouden
9 votes
Published on 2018-10-30 by Johan den Ouden

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

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