DropdownList inside a Dialog doesn't calculate popup top offset correctly on mobile device

[Alex]

Hello,

I have the following issue only on MOBILE device - if I scroll down the website in order to go to a button that opens a Dialog component and then click the button, the Dialog opens and it contains a DropDownList component. Now when I click the DropDownList, the popup that is shown doesnt calculate its top offset correctly. It doesnt take into account the body scrollTop value. This issue only happens on a mobile device.

Steps to reproduce:

1. Using a mobile device open the sandbox (https://joe15.csb.app/) 
2. Scroll to the bottom of the page and click the button
3. When the Dialog is opened click the DropDownList and verify that the popup is not properly positioned

Here is a sandbox that I created to show the problem:

https://codesandbox.io/s/vue-template-forked-joe15?file=/src/App.vue

Here is a GIF showcasing the issue:

[Sevvandhi Nagulan]

Hi Alex, 

Greetings from Syncfusion support. 

We are currently validating the reported issue. We will update further details on 2^nd February,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Alex]

Hi Alex, 

Greetings from Syncfusion support. 

We are currently validating the reported issue. We will update further details on 2^nd February,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

Hello Sevvandhi,

any updates on this issue?

[Sevvandhi Nagulan]

Hi Alex, 

Greetings from Syncfusion support. 

We checked your query. The reported issue occurs in the specific mobile device only and it is not occurs in the all the device when placing the control inside dialog component. To handle such scenarios, we have provided support to customize the opening of popup in the open event. Please refer the code snippet below 

   onOpen: function (args) { 

      args.popup.collision = { X: "flip", Y: "flip" }; 

      args.popup.dataBind(); 

      args.popup.refreshPosition( 

        this.$refs.dropDown.ej2Instances.element, 

        true 

      ); 

    }, 

Please find the sample below. 

Sample link: https://codesandbox.io/s/vue-template-forked-w9mg7?file=/src/App.vue:2857-3081 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N