Disable SfMultiSelect from going full screen on mobile

[Aleksandar]

Hello,

Is there a way to prevent SfMultiSelect and SfDropDownList from going full screen on mobile?

There was a similar problem posted here https://www.syncfusion.com/forums/187721/prevent-drop-down-list-mobile-behaviour-popup-on-full-page-in-blazor-net-8, however the solution is not good enough.

It does not work if there are multiple dropdowns on the page, and when you jump from one to another, it still goes full screen.

I would like to disable it completely for all components which have such a behavior.

I have attached a sample project and a video describing the problem.

Attachment: Files_e9aeaa46.zip

[Priyanka Karthikeyan]

Hi Aleksandar,

 

Thank you for reaching out to us. We’re pleased to inform you that we've added support for the PopupDisplayMode API, which allows the popup to display in mobile mode similar to the desktop experience. By setting the PopupDisplayMode property to Inline, you can achieve the desired inline display.

 

Here’s an example for your reference:

 

​<SfMultiSelect
    TValue="string[]"
    TItem="Country"
    Placeholder="Select a country"
    AllowFiltering="true"
    ShowSelectAll="true"
    Mode="VisualMode.CheckBox"
    DataSource="@Countries" PopupDisplayMode="PopupDisplayMode.Inline">
    <MultiSelectEvents TItem="Country" TValue="string[]" OnOpen="BeforeOpen" Closed="ClosedHanlder"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>

For more information, please refer to the API documentation:

• MultiSelect PopupDisplayMode API Reference
• DropDownList PopupDisplayMode API Reference

 

 

If you are still encountering the same issue, please share the steps to reproduce it along with the Android device details. This information will help us understand the issue more clearly and provide you with a prompt response.

 

Regards,

Priyanka K

Attachment: Files_52285832.zip

[Aleksandar]

Hi Priyanka,

Thank you very much for a prompt response! I wasn't aware of such property, it's exactly what I was looking for.

I confirm it works great for MultiSelect control, but DropDownList experiences some issues where the list with items does not show up on mobile until scrolling starts or it's far away from the DropDown.

I updated the project and included a video to demonstrate the issue. 

Could you please check the updated project and let me know what's the best way to fix it?

Thank you

Attachment: DropDownListPositionIssue_1eb2a8b4.zip

[Priyanka Karthikeyan]

Hi Aleksandar,

Thank you for your patience and for sharing the sample.

We have reviewed the reported issue on a mobile device and observed that the popup is opening properly. For your reference, we have attached a video illustration demonstrating the behavior.

To assist you more effectively, could you please share the following details about the device on which you are experiencing the issue?

1. Device Information: Model and operating system version.
2. Browser Details: Name and version of the browser being used.
3. Steps to Reproduce: If there are any specific actions needed to reproduce the issue.

This information will help us replicate the scenario and provide a more accurate resolution. We appreciate your cooperation and look forward to your response.

Regards,

Priyanka K

[Aleksandar]

Hi Priyanka,

This issue is only reproducible on iOS, it works fine on Android.

To reproduce the issue, please open the Blazor app (I attached in the project in the original post) on an iOS device, scroll down to the middle of the page, and tap on the drop down control.

When you do this, you will notice the drop down does not expand and the pop up only show when you apply some scroll. I think the issue is related to positioning of the pop up as it gets placed outside of the screen and it's then re-positioned on additional scroll.

 
I can reproduce this issue reliable on any iOS device (both iPhone and iPad). These are some of the devices I used for testing:

• iPhone XS (iOS version: 17.7.1)
  • Web Browsers: (Google Chrome 131.0.6778.73, Safari 17.7.1)
• iPhone 12 (iOS version: 17.1.1)
  • Web Browsers: (Google Chrome: 131.0.6778.73, Safari: 17.1.1)

The Syncfusion package version, you can find in the project I attached in the original post.

Please let me know if you need any other information.

Thank you.

[Priyanka Karthikeyan]

Hi Aleksandar,

 

We have considered this issue "When using PopupDisplayMode as Inline, the popup is not opened properly in iphone" as a bug from our end, and the fix for the issue will be included in our upcoming first weekly release after Volume 4 main release which is expected to be scheduled on end of December.

 

You can now track the status of the feedback through the below link,

 

Feedback link:  When using PopupDisplayMode as Inline, the popup is not opened properly in iphone in Blazor | Feedback Portal

 

 

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 Aleksandar,

 

We’re pleased to inform you that the issue, "Popup not opening properly on iPhone when using PopupDisplayMode as Inline," has been resolved in our release version 28.1.39. We recommend upgrading to the latest version to address this issue.

 

Root Cause:

When PopupDisplayMode is set to Inline, the position CSS property was being set to fixed upon opening the popup. This caused the popup to appear outside the viewport, particularly when the Dropdown List was positioned in the middle or near the end of the viewport on iOS devices.

 

Solution:
We have adjusted the behavior to prevent the position property from being set to fixed when PopupDisplayMode is Inline and the device is running iOS, ensuring the popup remains within the viewport.

 

 

Regards,

Priyanka K