Issues with Drag and Drop when using CSS Overflow

Hi all,

Hopefully someone can help me out with this.

Im using the drag and drop component from the Forge with a record list. When trying to Drag and drop a record from one record list to another it works pretty good. But when using it with CSS overflow-y I get an issue when doing the drag and drop.

Example: When dragging a record to the right, an infinite horizontal scrollbar appears and I cant get outside the record list. 


CSS code used:

SyntaxEditor Code Snippet

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


Any ideas? :)

Regards

Toni

Hi António.

What are you trying to achieve exactly? (your use case) 

I believe that is a expected component behaviour, but you could confirm this by creating a post in the component forge page.

Maybe there some way to workaround this using something like the HTML Drag and Drop API itself (just thinking).

 

António Neves wrote:

Hi all,

Hopefully someone can help me out with this.

Im using the drag and drop component from the Forge with a record list. When trying to Drag and drop a record from one record list to another it works pretty good. But when using it with CSS overflow-y I get an issue when doing the drag and drop.

Example: When dragging a record to the right, an infinite horizontal scrollbar appears and I cant get outside the record list. 


CSS code used:

SyntaxEditor Code Snippet

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


Any ideas? :)

Regards

Toni

Hello Toni ;)

Can you show me your .oml? Then I can help you out with this ;)


Kinds regards,


Martin


André Siébra wrote:

Hi António.

What are you trying to achieve exactly? (your use case) 

I believe that is a expected component behaviour, but you could confirm this by creating a post in the component forge page.

Maybe there some way to workaround this using something like the HTML Drag and Drop API itself (just thinking).

 

Hi André,

Thanks for your reply. 

Well, 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 issue occurs that I mentioned earlier.

I attached the OML file. But i will also create a post in the component forge page as you suggested.

Regards

António



Hi António Neves,

Are you using Reactive Web? If so, please check if this component helps you https://www.outsystems.com/forge/component-overview/8045/sortablejs (Shameless plug, I belong to the team that built it, so I can help you if you need)

It is pretty simple and straight forward but offers drag and drop from one list to another as well as sorting. It then triggers an event with the details of what the user has done so that you can control the outcome on OutSystems side. 

Thanks :)

José Pedro Proença wrote:

Hi António Neves,

Are you using Reactive Web? If so, please check if this component helps you https://www.outsystems.com/forge/component-overview/8045/sortablejs (Shameless plug, I belong to the team that built it, so I can help you if you need)

It is pretty simple and straight forward but offers drag and drop from one list to another as well as sorting. It then triggers an event with the details of what the user has done so that you can control the outcome on OutSystems side. 

Thanks :)

Hi Pedro,

Unfortunately im using Traditional web :(

But thanks anyway!


Regards,

António


António Neves wrote:

André Siébra wrote:

Hi António.

What are you trying to achieve exactly? (your use case) 

I believe that is a expected component behaviour, but you could confirm this by creating a post in the component forge page.

Maybe there some way to workaround this using something like the HTML Drag and Drop API itself (just thinking).

 

Hi André,

Thanks for your reply. 

Well, 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 issue occurs that I mentioned earlier.

I attached the OML file. But i will also create a post in the component forge page as you suggested.

Regards

António



Hi António.

Thanks for the explanation. I've checked your OML and realized that the Drag and Drop forge component do not supports child drag items of a parent container with overflow defined. This is because the draggable child items have a position relative style definition, so they can't "get out" the parent container, getting limited to the parent scope. 

I tried to change this behavior, however it would be necessary to change the scripts of drag and drop JS API used by the component... I would go for another approach, since these scripts are hard to handle.

I know that drag and drop give us more usability, but if you don't have much time to spend in this, you can consider to workaround this for now by implementing a Dual List Box (https://www.outsystems.com/forge/component-overview/3342/dual-list-box).