With .net 8 and Automatic interactive render modes, RadzenBody jumps up and under the header

Radzen.Blazor Components
1

I have a MainLayout like this:

<RadzenLayout>
    <MyCustomHeader />
    <MyCustomSidebar />
    <RadzenBody class="rz-p-1 rz-pt-3">
        @Body
    </RadzenBody>
</RadzenLayout>

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

If I enable interactivity in the MyCustomHeader like this:

@attribute [RenderModeInteractiveAuto]

<RadzenHeader>
</RadzenHeader>

as soon as the interactivity is initialized, the body content jumps up by the height of the header, and behind the header:

image
image860×142 4.55 KB

If I remove @attribute [RenderModeInteractiveAuto] this doesn't happen, however interactivity is needed to make the header interact with the sidebar.

Unfortunately, I cannot share my whole project as it is company code.

Followup

I noticed that turning on interactivity adds the fixed class to the RadzenHeader which causes this behavior.

2

You can check the sample application attached to this thread. It shows what to do in order to avoid this behavior. Sidebar not working in .NET 8 RC1 experiment - #13 by korchev

<RadzenHeader style="position: static">
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
        <RadzenSidebarToggle @rendermode="@RenderMode.InteractiveServer" Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
        <RadzenLabel Text="Header" />
    </RadzenStack>
</RadzenHeader>
<RadzenSidebar Style="width:auto">
1 Like