RadzenSelectBar appearance changed after reuse – how to restore original styling?

Radzen.Blazor Components
1

On one of my pages, I successfully used a RadzenSelectBar to control the row density of a RadzenDataGrid (e.g., switching between Relaxed and Compact modes). Since this worked perfectly, I decided to reuse the same approach on other pages by copying the code.

<RadzenStack>
<RadzenRow AlignItems="AlignItems.Center" >
    <RadzenCard Variant="Variant.Outlined" Style="width: 100%; ">
                <RadzenSelectBar @bind-Value="@gridDensityStr" TValue="string" 
                                    Data="@datagridDensities" Size="ButtonSize.Small" Change="() => SelectDensityChange()" />

However, after doing so, the appearance of the RadzenSelectBar changed — not just on the new pages, but also on the original one. It now looks different across all pages. I can’t imagine this is directly caused by simply copying the code.

New appearance (how do I change that?):

grafik

Is there a way to restore the original styling or appearance of the RadzenSelectBar? What might have caused this change?

Thank you in advance for your help!

2

Hi @Steinmetz,

I tested the following:

<RadzenStack>
<RadzenRow AlignItems="AlignItems.Center" >
    <RadzenCard Variant="Variant.Outlined" Style="width: 100%; ">
    <RadzenSelectBar @bind-Value=@value TValue="bool">
        <Items>
            <RadzenSelectBarItem Text="On" Value="true" />
            <RadzenSelectBarItem Text="Off" Value="false" />
        </Items>
    </RadzenSelectBar>
    </RadzenCard>
</RadzenRow>
</RadzenStack>

@code {
    bool value;
}

Looks fine to me:

image
image2194×474 27.6 KB

The only suspicious thing that I see is nesting RadzenCard within RadzenRow. The latter is supposed to contain only RadzenColumn elements as its immediate children.

Can you reproduce this behavior somehow by editing this online demo?