Items drag and drop disappear when using min-height

[Marijke Meersman]

It seems that in a lot of components you can set a height but not a min-height or max-height?

So I usually put it in css.

I have two listboxes that can drag and drop to each other. The first list is a very long list and the second one is an empty list. The max-height is set by the parent. But the second list only has a small window to drag the items into, so I want to make that as big as the space available (so as big as the long list).

Then I run into problems: 

1. When trying to apply min-height to the .e-listbox-wrapper class, the items I drop inside the empty listbox disappear.
2. When trying to set height to 100% for both boxes, the full one will extend to the correct height, but the empty listbox remains as small as one item (the "no records found" item).

I think that the first one is certainly a bug, but I didn't expect the outcome of the second one either.

How can I set both lists on the same height without having to define a fixed px height (which is very bad for accessibility) 

[YuvanShankar Arunagiri]

Hi Marijke,

Sorry for the delay. We have checked your reported query and prepared the sample based on your requirement. Using the created event, we can get first list box height, using that value, we can set the height for second list box shown as below.

onCreated() {

        let proxy = this;

        setTimeout(function() {

            proxy.listObj2.height = proxy.listObj1.element.clientHeight;

        });

    }

After the drag and drop action, we can maintain the same height for both list boxes using the drop event of the list box component shown below.

    setHeight() {

        var maxLi =  Math.max((this.listObj1 as any).liCollections.length, (this.listObj2 as any).liCollections.length);

        var liHgt = maxLi * this.liHeight;

        this.listObj1.height = this.listObj2.height = liHgt + 5;

    }

Sample link: https://stackblitz.com/edit/angular-jjm35e?file=src%2Fapp.component.ts

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

[Marijke Meersman]

I got two new problems related to this.

I use the two lists inside two panes of a splitter (that are part of an inner splitter inside an outer splitter).

I applied the changes you suggested, and it works, but I have a few new issues.

I added changes to your stackblitz, here is the link: https://stackblitz.com/edit/angular-jjm35e-qjyfky?file=src/app.component.html so you can replicate the issues I'm describing below

My two problems: 

1. I don't want my second listbox to be as long as the first one. which sounds like the opposite of what I asked before but it's not really: I want the second list to be as long as the visible part of the first list. You only see a part of the first list and then you'd have to scroll. But I want to have the dropzone of the second list to be the length of the visible part of the first. So I want to be able to drag the items to wherever in that splitter field without having a scrollbar. I tried replacing the height of the second listbox to the height of the splitter, but this didn't work either.

2. When dragging an item from the first to the second list (when the width of the second list is wider then the "No records found" text), the width of the second lists changes because the text of 'No records found' disappears. But it makes the field smaller, thus causing it to sometimes make it very difficult to drop it in the correct zone. This happens when hovering over the second list, without dropping anything in it yet. After hovering without dropping, the text doesn't come back either. I see that it is "normal" behaviour for the text to disappear in the demos of listbox, but the splitter sometimes becomes narrower than the defined min-width and that shouldn't happen.

I hope you can help me because I'm really struggling to make this work

[YuvanShankar Arunagiri]

Marijke,

Query: for first issue?

Kindly refer to the below code snippet to achieve your requirement.

onCreated() {

        let proxy = this;

        setTimeout(function() {

            proxy.listObj1.height = proxy.listObj2.height = Math.min(proxy.listObj1.element.parentElement.clientHeight, proxy.listObj1.element.clientHeight);

        });

    }

Sample link: https://stackblitz.com/edit/angular-jjm35e-xsrxt9?file=src%2Fapp.component.ts

Query: for second issue:

We have confirmed the issue as “No Record Found text disappears while hovering the drag item on list box without drop" and logged a defect report. We will include the fix for this issue in upcoming weekly patch release scheduled for April 12^th, 2023.

Feedback link: https://www.syncfusion.com/feedback/42580/no-record-found-text-disappears-while-hovering-the-drag-item-on-list-box-without

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[YuvanShankar Arunagiri]

Marijke,

We are glad to announce our weekly patch release (21.1.41) is rolled out. We have included the fix for this “No Record Found text disappears while hovering the drag item on list box without drop” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end (21.1.41).

Feedback link: https://www.syncfusion.com/feedback/42580/no-record-found-text-disappears-while-hovering-the-drag-item-on-list-box-without

Sample link: https://stackblitz.com/edit/angular-8dnxfa-phc6cj?file=src%2Fapp.component.html