We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Listbox mobile problems (drag and drop, firefox sizing)

  1. When using the listbox with drag and drop on mobile browsers, I am unable to drag an element to the topmost spot. I can drag it to every other space, just not the topmost one.
  2. I set height to min-content in order to make it fit the content perfectly, this works in every browser except for firefox, in firefox the height stays way too big.
  3. I am also looking for a way to allow me to drag the element immediately on touch. now I have to hold on the element for a moment first before it becomes draggable.

1 Reply

YA YuvanShankar Arunagiri Syncfusion Team June 9, 2023 06:59 AM UTC

Hi Louis,

As you contacted us through a support ticket with the same issue reported in this forum, we have held this forum for a while. Now, we have shared the response to all your queries in your support ticket. Here is a summary of our response to your queries.


Query: When using the listbox with drag and drop on mobile browsers, I am unable to drag an element to the topmost spot.


We have logged the bug report and publish the fix for this issue in our latest version 21.2.9.


Feedback link: https://www.syncfusion.com/feedback/43537/drag-and-drop-on-mobile-browsers-it-unable-to-drag-an-element-to-the-topmost-place

Release notes: https://ej2.syncfusion.com/documentation/release-notes/21.2.8/?type=all#listbox

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


Query: I am also looking for a way to allow me to drag the element immediately on touch. 

Refer to the below code snippet to resolve this issue.


 <ejs-listbox id="listbox" [dataSource]='data' [allowDragAndDrop]='true' [selectionSettings]="selection" (created)="onCreated()"></ejs-listbox>

……………

 onCreated() {

        let listboxobj:any = getInstance(document.getElementById("listbox"), ListBox);

        listboxobj.ulElement.ej2_instances[1].enableTapHold = false;

        listboxobj.ulElement.ej2_instances[1].tapHoldThreshold = 10;

    }


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


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


Regards,

YuvanShankar A


Loader.
Up arrow icon