Customize popup width in Blazor Dropdown Menu Component

19 Dec 20241 minute to read

The dropdown popup width can be customized using the PopupWidth property of the DropDownButton component. By default, the popup’s width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value.

@using Syncfusion.Blazor.SplitButtons

<SfDropDownButton CssClass="custom-icon-css" Content="Clipboard" PopupWidth="200px" Open="beforeOpen" Close="beforeClose">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Selection" IconCss="e-icons e-list-unordered"></DropDownMenuItem>
        <DropDownMenuItem Text="Yes / No" IconCss="e-icons e-check-box"></DropDownMenuItem>
        <DropDownMenuItem Text="Text" IconCss="e-icons e-caption"></DropDownMenuItem>
        <DropDownMenuItem Text="None" IconCss="e-icons e-mouse-pointer"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>