Card borders not displayed properly within a Panel

Radzen.Blazor Components
1

When placing a Card within a Panel, the borders are no longer displaying properly:

Radzen 7.0.3

@page "/panel"

<RadzenPanel AllowCollapse="true">
    <HeaderTemplate>
        <h5>Card within Panel</h5>
    </HeaderTemplate>
    <ChildContent>
        <RadzenCard>
            <RadzenText Text="Borders not visible" />
        </RadzenCard>
    </ChildContent>
</RadzenPanel>

image
image980×338 17.6 KB

Thanks

2

Hi @nitrouscookies,

Indeed, the Panel trims the shadows because of overflow: hidden; styles used for animations.

You can mimic a Card with a shadow by styling the expander content:

<style>
    .rz-panel .rz-expander.rz-state-expanded {
        box-shadow: var(--rz-card-shadow);
        border-radius: var(--rz-card-border-radius);
        background-color: var(--rz-card-background-color);
    }
</style>

If you insist on using RadzenCard inside, please use a variant without shadows, for example:

<RadzenCard Variant="Variant.Flat">
<RadzenCard Variant="Variant.Text">
<RadzenCard Variant="Variant.Outlined">

Also, keep in mind that the Panel itself has card-like look and feel, and using cards with shadows inside cards with shadows is not recommended in some design system guidelines. For reference in Material 3 the guideline states:

Instead of applying shadows by default to all levels, use shadows only when required to create additional protection against a background or to encourage interaction.