How to set correct size, color and icon centering for SfDropDownButton

[Tomasz S.]

How to set SfDropDownButton to have 

1) the same width

2) the same background (for both light and dark themes) 

3) centered icon

same as a regular button.

example  :

                <SfButton CssClass="e-flat e-small"

                        IconCss="e-icons e-edit" />

                <SfDropDownButton IconCss="e-icons e-more-vertical-1" CssClass=" e-small e-caret-hide" >

                    <DropDownButtonEvents  />

                    <DropDownMenuItems>

                        <DropDownMenuItem Id="print" IconCss="e-icons e-print" Text="Drukuj" />

                    </DropDownMenuItems>

                </SfDropDownButton>

https://blazorplayground.syncfusion.com/embed/VjLnjCWWfYpFHYwz?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Tomasz S.,

 

To make the DropDownButton look consistent with a regular Button (same width, background, and centered icon), you can use the predefined e-flat style in Syncfusion’s EJ2 theme. It applies a flat button look (without raised borders, shadows, or gradients), ensuring a minimalistic design that works consistently across both light and dark themes.

 

To make the DropDownButton visually match a regular Button in terms of width, background, and icon alignment, you can define a custom class (for example, custom-ddb) and adjust the styles accordingly:

 

[Razor]

<SfButton CssClass="e-flat e-small" IconCss="e-icons e-edit" />

 

<SfDropDownButton IconCss="e-icons e-more-vertical-1"

                  CssClass="e-small e-caret-hide e-flat custom-ddb">

    <DropDownMenuItems>

        <DropDownMenuItem Id="print" IconCss="e-icons e-print" Text="Drukuj" />

    </DropDownMenuItems>

</SfDropDownButton>

 

[CSS]

/* Match width with regular button */

.e-btn.custom-ddb {

    width: 28px;

}

 

/* Center the icon properly */

.e-btn.custom-ddb .e-btn-icon {

    margin: -5px !important;

}

 

This ensures the DropDownButton has the same width, consistent background across themes, and a centered icon—making it visually aligned with a standard button.

For your reference, we have included a sample with GIF demonstration below.

Gif:

Sample: https://blazorplayground.syncfusion.com/embed/htLHXCWLzjGpoNrA?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

[Tomasz S.]

Thanks

I thought there might be some classes like e-icon-center.

But in this solution, cell centering does not work properly

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

There isn’t a predefined class like e-icon-center in our library. However, you can achieve the required alignment by customizing it with CSS based on your specific requirement. For example, you can define a custom class, like the previous sample we shared, and adjust the icon’s margin or padding to ensure proper centering within the DropDownButton.