1. Home
  2. Forum
  3. Blazor
  4. On mobile, SfDropDownList popup expands full width and ignores parent width inside SfGrid dialog edit mode

On mobile, SfDropDownList popup expands full width and ignores parent width inside SfGrid dialog edit mode

Hello Syncfusion Support,

We’re using a custom form (CategoriaForm) within a SfGrid using EditMode="Dialog". Everything works as expected on desktop. However, on mobile devices (≤ 480px), the popup of SfDropDownList always expands to full screen width, ignoring the width of the input or container — even when PopupWidth="100%" is explicitly set.

🔧 Reproduction scenario

Grid definition:

<SfGrid EditMode="EditMode.Dialog" ... >
    <GridEditSettings Mode="EditMode.Dialog">
        <Template>
            <CategoriaForm Model="@(context as CategoryDto)" Grid="gridRef" />
        </Template>
    </GridEditSettings>
</SfGrid>

Inside the custom form CategoriaForm :

<SfDropDownList TValue="string"
                TItem="SelectOption"
                DataSource="@ProductTypeOptions"
                @bind-Value="SelectedProductTypeStr"
                Placeholder="Select type"
                FloatLabelType="FloatLabelType.Always"
                PopupWidth="100%"
                CssClass="dropdown-responsive">
    <DropDownListFieldSettings Text="Text" Value="Value" />
</SfDropDownList>

🧪 Problem on mobile viewports

The rendered popup is appended to <body> with styles like:

<div class="e-ddl e-control e-lib e-popup e-ddl-device e-popup-open"
     style="width: 100vw; left: 0; right: 0;">
</div>

Regardless of the PopupWidth or container styles, the dropdown always expands to full viewport width.

Question

Is there any official Syncfusion-supported way to:

  1. Ensure the popup respects the width of its input/parent container on small/mobile screens?

  2. Prevent the popup from stretching to 100vw when opened inside a GridEditSettings.Template form?

  3. Align the popup properly with its input component even in SfDialog?

We’ve tried:

  • Setting PopupWidth="100%" or 300px

  • Applying CSS overrides to .e-popup.e-ddl-device

  • Wrapping the dropdown in constrained containers

…but none of these prevent the full-width expansion.

We’d appreciate your guidance or confirmation on the expected behavior and any recommended fix.

Thank you,

Daniel Andrade 


1 Reply
YA YuvanShankar Arunagiri Syncfusion Team June 9, 2025 10:04 AM UTC

Hi Daniel,


We have created a sample based on the information you provided, and the DropDownList popup is displaying correctly. Please find the sample and video illustration below for your reference.



We would like to inform you that when the allowFiltering property is enabled, the popup will appear in full screen on mobile devices. Could you please confirm whether filtering is enabled in your scenario?

To better assist you, we kindly request the following details:

  • Modify the provided sample to reflect your scenario or share a sample that reproduces the issue

  • Steps to replicate the issue

  • A video illustration showing the problem

  • And also please confirm whether the issue only occurs within Grid

Providing these details will help us understand the issue more clearly and offer a prompt and accurate resolution.


Regards,

YuvanShankar A


Attachment: DropDownList_6ac9ffcc.zip

Loader.
Up arrow icon