Log in to AnswerLog in to Follow
UserImage.jpg
Tiago Baptista
32Views
4Comments
[Sortable AF] Empty List case - no droppable area
Question
Reactive
Forge
sortable-af
Reactive icon
Sortable AF
Forge component by Greg Whitten
Application Type
Reactive

Hi,

I tried to play with this component and learn from it using the demo module which I also installed. Never figured it out though how to solve an initial case where the one of the lists starts empty, having 2 given lists like in the Sortable screen demo. In fact and considering that example, if I empty one of the lists it's almost impossible to drop an item back to that list, as we won't find anymore the droppable area.

I tried to use the ChildElementSelector input parameter as also the Draggable, but with no results. I also investigated the SortableJS github issues by checking if anyone had the same situation and in most cases the 'solved answer' was to try to define some css using:

:empty

min-height

which eventually would make an empty slot needed with some content.

The :empty css pseudo-class never works actually because the OutsystemsUI always puts script tags inside a List widget, so the List is actually never empty.

Any thoughts how to solve this easily?

Thanks,

Tiago


0
0
25 Oct 2021
2021-03-12 19-55-30
Greg Whitten
mvp_badge
MVP

Hi Tiago,

You could set a min-height directly without using the :empty psuedo-class, or you could add a class to your List when it's empty and set the min-height for that class.


Greg

0
0
25 Oct 2021

Hi Greg,

Thanks for your reply.

Didn't understand exactly what you're trying to suggest. Would you consider to add a div inside the List widget with a class having the min-height property set when the list is empty? Or would you add the same kind of CSS class directly to the List widget, conditioning some logic in the Style Classes property of the List ?

Thanks,

Tiago

0
0
25 Oct 2021
2021-03-12 19-55-30
Greg Whitten
mvp_badge
MVP

A CSS Class directly to the list widget that is set conditionally when the list is empty.  So your class expression on your List could be "list list-group" + If(List.Empty, " empty-list", "")

Then in your empty-list class you could specify a min-height property.


Greg

0
0
25 Oct 2021

Replying to Greg Whitten's comment on 25 Oct 2021 18:31:40

Hi Greg,

Ok, that definitively helped.

 

But now, I have a second issue. When I drag & drop a list item from the left List into the right List, I have duplicate items.

In fact the NewIndex = 2 and not 1 as it should.

What I'm doing is to take advantage of the Add event of the second List and added logic to manipulate a list variable which is bound to the List widget. This way I can affect the "list-empty" css class condition referred and make it disappear when the list is not anymore empty.

So, it seems there's an internal list bound to the Sortable object and for this to work properly I would have to manipulate it and not the variable list I created and bound to the List widget.

Any suggestions here?

Thanks again,

Tiago

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