Prevent Drop Down List Fullscreen Popup

[Shannon]

Hello,

I am working on a project that requires mobile responsiveness. Right now we have multiple drop down lists where it pops up to full screen (screen shot below). Is there any way to prevent this ?

Would prefer all drop downs to render as below instead:

[Vinitha Jeyakumar]

Hi Shannon,

We want to let you know that the Dropdown List popup will be displayed in the overall page for the better UI to the user in mobile devices and this is the intended behavior of the component. 

We can disable this behavior by overriding the popup element style as mentioned below code,

Code snippet:

        <SfDropDownList TItem="GameFields" ID="multiselect" TValue="string" PopupHeight="230px"  Placeholder="e.g. Basketball" @bind-Value="@DropDownValue" DataSource="@Games">

                <DropDownListEvents TItem="GameFields" TValue="string" Opened="Opened" ValueChange="OnChange"/>

                <DropDownListFieldSettings Text="Text" Value="ID"/>

            </SfDropDownList>

  @code{

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

    public async Task Opened(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {        

        await JsRuntime.InvokeVoidAsync("OnOpen", "multiselect");

    }}

client.js

window.OnOpen = function (id) { 

    setTimeout(() => { 

        if (ej.base.Browser.isDevice) { 

            var multiObj = document.getElementById("multiselect").blazor__instance; 

            var parentElement = multiObj.containerElement; 

            multiObj.popupObj.position = { X: 'left', Y: 'bottom' }; 

            multiObj.popupObj.width = parentElement.offsetWidth; 

            multiObj.popupObj.dataBind(); 

            multiObj.popupObj.element.classList.remove( 

            'e-ddl-device', 

            'e-popup-full-page' 

        ); 

      } 

    },30); 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_Mobile_Fullscreen-1880678126-1425077280

Regards,

Vinitha

[Shannon]

Hello, 

Thank you for the prompt response! So far your solution has worked, appreciate it very much! Will mark as answer.

[Deepak Ramakrishnan]

Hi Shannon,

We are glad to know that the solution provided  satisfies your requirement . Kindly get back to use if you need further assistance on this.

Thanks,

Deepak R.

[Aleksandar]

Hello,

This workaround no longer works with newer Syncfusion.Blazor package versions.

I'm using Syncfusion.Blazor.DropDowns version 24.2.6 and I can see that the DOM structure has changed.

Can you please share an example that works with this version?

Thank you!

[Yohapuja Selvakumaran]

Hi Aleksandar,

Thank you for reaching out to us. Based on the previously shared sample, we have carefully validated the issue you reported regarding the DropDownList behavior on mobile devices. We’d like to inform you that when the filtering feature is disabled in the DropDownList, the control does not display as a full-page popup on mobile devices. This is the expected behavior when filtering is turned off, as the control adapts to a simpler layout on mobile screens to enhance performance and usability.

To provide additional clarity, we’ve created a sample for your reference that demonstrates this specific behavior. You can review the sample to observe how the DropDownList behaves on mobile devices with filtering disabled.

We hope this helps! Please let us know if you have any further questions or need assistance with any other functionality.

Regards,

Yohapuja S

Attachment: Dropdown_mobilepopup_9420efaf.zip