Issue with dropdownlist popup position on mobile devices when using allowFiltering=true in Asp.net core 6.0 razor pages

[Le]

Dear Syncfusion Support Team,

I am writing to request your assistance with an issue related to my Asp.net core 6.0 razor pages application. Currently, when using a dropdownlist with the allowFiltering="true" setting on a mobile device (iOS, Android) where the page is being scrolled, the popup is displayed in the wrong position (as shown in the attached images).

The page will display correctly when not scrolled, but when scrolled down, the popup is incorrectly positioned. Previously, I did not encounter this issue when using Syncfusion version 19.2.62. However, recently the issue appeared on iOS devices, and I decided to upgrade to version 21.1.41 in an attempt to resolve the issue. Unfortunately, even with the upgrade, the issue persists. Additionally, the issue also affects the demo application (attached) on Android devices.

Therefore, I am seeking your support to resolve this issue. I have attached the necessary files for Syncfusion to investigate. Additionally, I have included four images, with the first one displaying the page in an unscrolled state, the second one showing the popup correctly displayed when opened from the state in the first image, the third one displaying the page being scrolled down, and the fourth one displaying the popup incorrectly positioned when opened from the state in the third image.

Thank you for your attention to this matter, and I look forward to your prompt response.

Best regards

Attachment: TestSf_5a0543a5.rar

[Le]

Hello Syncfusion,

I'm still waiting for support after posting my article on the forum a couple of weeks ago. I just wanted to let you know that I'm still interested in getting help with this issue.

[Priyanka Karthikeyan]

Hi Le,

Sorry for the inconvenience caused. We are currently validating your requirement and will update further details shortly.

Regards,

Priyanka K

[Le]

Hi  Priyanka K,

Thank you for your response and for looking into my request. I appreciate your efforts in validating my requirement and I'm glad to hear that it's being considered. I will wait for further updates and let me know if there's any additional information I can provide to help with the process.

Best regards

[Priyanka Karthikeyan]

Hi Le,

We have considered the reported issue "Full screen popup is not positioned properly after scroll the page" as a bug from our end and the fix for the issue will be included with our upcoming patch release on end of May 2023.

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/43551/full-screen-popup-is-not-positioned-properly-after-scroll-the-page

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.”

Regards,

Priyanka K

[Priyanka Karthikeyan]

Hi Le,

We have thoroughly validated and identified the problem at the sample level. It appears that the issue is related to a reference to bootstrap.min.css in the provided sample.

Specifically, in the layout.cshtml file, we found that the style 'scroll-behavior: smooth' is set to the html tag while using the bootstrap.min.css file. This combination is causing the reported issue to occur.

To assist you in resolving this issue, we have provided a code snippet below for your reference:

Site.js file	var $j = jQuery.noConflict(); $j(document).ready(function () {     if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {         $j('html').addClass('disable-smooth-scroll');     } });
Site.css file	.disable-smooth-scroll {     scroll-behavior: auto !important; }

We believe that implementing this code snippet will address the problem you encountered.

Regards,

Priyanka K

Attachment: TestSf_5a0543a5_(3)_44ddebc0.rar

[Le]

Hi Priyanka Karthikeyan,

I wanted to apologize for the confusion regarding the sample project. The sample project was created using VS2022, which defaults to Bootstrap v5.1.0. However, my actual project, which is causing the issue, was created using VS2019 and is using Bootstrap v4.4.1. In this version, the 'scroll-behavior' property is not present.

I followed your instructions and added the provided code snippets to the sample project. The solution works well on Chrome for Android, both with Bootstrap v4.4.1 and v5.1.0. However, I am still facing the same issue on iOS devices (Safari/Chrome). The scroll behavior does not seem to be affected by the added code.

I appreciate your support thus far, and I wanted to provide you with this update to help further diagnose the problem. If there are any additional suggestions or solutions you can provide to resolve the issue on iOS devices, I would be grateful.

Thank you for your time and assistance. I look forward to your response.

Best regards,

[Le]

Hello Syncfusion,

I'm still waiting for support after my recent reply on the forum a couple of weeks ago. I just wanted to let you know that I'm still interested in getting help with this issue.

Thank you for your attention.

Best regards

[Priyanka Karthikeyan]

Hi Le,

 

We have validated the reported issue on our end based on the shared details. However, the provided solution seems to be working fine on iPhone devices. Can you please confirm whether you are still experiencing the issue with the provided sample-level solution?

 

we have attached the GIF for your reference

 

If you are still facing the issue, we kindly request that you provide additional details about the problem as mentioned below. This will help us further validate the issue and provide you with a better solution.
* Faced issue in real device only or lambda testing tool.
* Provide device details
* If possible, please share the video illustration.

 

Regards,

Priyanka K

Attachment: chrome_yUGzbUeZYK_5650b2e7.zip

[Le]

Dear Priyanka K,

Thank you for your response and for validating the reported issue on your end. I appreciate the attached GIF for reference.

Regarding the provided solution, I must confirm that I am still experiencing the issue even after implementing the sample-level solution. The problem persists on both iPhone devices.

To further illustrate the issue and provide more details, I have created an online example accompanied by video demonstrations on real devices. You can access the example at the following URL: http://badt.xyz.

For your convenience, I have also provided direct links to the video demonstrations:

iPhone XS Max with iOS 16.1.2: http://badt.xyz/assets/video/xsm1612.mp4

iPhone 11 Pro Max with iOS 16.1: http://badt.xyz/assets/video/11prm161.mp4

Android device: http://badt.xyz/assets/video/android.mp4

I have attempted to provide this information through the feedback page at https://www.syncfusion.com/feedback/43551/full-screen-popup-is-not-positioned-properly-after-scroll-the-page on June 30. However, I have been unable to access the forum since then, preventing me from posting the response.

Furthermore, I have updated both the DLL and script to the latest version 22.1.37, but the issue still persists.

I appreciate your attention to this matter and your continued support in resolving the issue.

Best regards,

[Sreeju]

I am also having the same issue. The provided workaround is not working.

[Nick]

The company offers a wide range of services tailored to meet the specific needs of businesses across various industries. Their expertise spans across mobile app development, web development, UI/UX design, quality assurance, and business analysis. MLSDev is experienced in working with startups, small and medium-sized enterprises (SMEs), and large enterprises, offering solutions that align with their goals and requirements.

[Le]

Dear Priyanka Karthikeyan,

I hope this message finds you well. I wanted to follow up on the reported issue we discussed earlier.

I appreciate your efforts in validating the issue and providing a sample-level solution. However, I must confirm that the problem still persists on iOS devices, as mentioned in my previous response. I have also provided an online example and video demonstrations to illustrate the issue more clearly.

Since my last reply on July 5, 2023, I have not received any further updates from your end. I understand that you might be busy, but I am still very much interested in resolving the issue and would greatly appreciate your continued support.

If there is any additional information or details you need from my side, please let me know, and I will be happy to provide them promptly.

Thank you for your attention, and I look forward to hearing from you soon.

Best regards!

[Priyanka Karthikeyan]

Hi Le,

Sorry for the inconvenience. We have considered the reported issue "Full screen popup is not positioned properly after scroll the page on IPhone real device" as a bug from our end and the fix for the issue will be included in our upcoming patch, which is scheduled for the end of August.

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/45869/full-screen-popup-is-not-positioned-properly-after-scroll-the-page-in-iphone

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.”

Regards,

Priyanka K

[Priyanka Karthikeyan]

Hi Le,

After conducting a more in-depth analysis, we suggest setting the position of the full-screen popup to "fixed." Please refer to the below provided solution at the sample level for guidance on implementing this change.

.e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
    position: fixed;
}

Furthermore, If the above workaround does not met your requirement, we would like to propose the consideration of implementing a combobox. This option eliminates the occurrence of a full-page display when the allowfiltering parameter is enabled in mobile mode.

Regards,

Priyanka K

Attachment: DropDownListIphone_781441e1.zip