DropDownListComponent popup has wrong position on IOS

[Franck Mangin]

The sample page below works fine in Chrome and Safari on laptops, but on an iPhone the popup gets a fixed top of 3000px and it is thus not visible:

https://totem.ch/pm/cours. -> scroll down and click on "Yoga | Stretch" under "Horaires Cours"

This is a DropDownListComponent inside a DialogComponent, configured as follows:

<ejs-dialog ref="bookDialog" :allow-dragging="true" :enable-resize="true" :is-modal="true" :show-close-icon="true"

            :visible="false" :width="isLarge ? '50vw' : (isSmall ? '75vw' : '100vw')" content="content"
            cssClass="ep-dialog" header="header" height="auto" minHeight="20rem">

<ejs-select v-model="occurrenceId" :dataSource="occurrenceChoices" :fields="{ text: 'humanDate', value: 'id'}"
            :htmlAttributes="{'data-path': 'occurrenceId'}" :show-clear-button="false"
            cssClass="form-control w-auto" item-template="item" name="occurrenceId" value-template="item">

Once I click on the select the popup gets the following style applied; if I manually patch "top" the popup appears just fine:

Here is the popup HTML on the iPhone:

Any idea on how to fix this?

Thanks!

[Priyanka Karthikeyan]

Hi Franck Mangin,

 

We have thoroughly tested the shared link on an iPhone device and did not encounter any issues with the latest version. The DropDownList popup is displaying correctly. To help resolve any potential issues promptly, could you kindly provide more details about the iPhone device you are using for testing? Additionally, sharing the specific steps to replicate the problem would greatly assist us in providing accurate support. Your cooperation is greatly appreciated, and we are dedicated to swiftly resolving any challenges you may encounter. Thank you for your time and collaboration.

 

Regards,

Priyanka K