124
Views
6
Comments
Issues with Drag and Drop when using CSS Overflow
Question

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

mvp_badge
MVP
Rank: #104

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).

 

Rank: #742

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


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 :)