Header with Interactive Mode cuts off the body?

Sorry if this is a very silly question, I'm new to Blazor and Radzen in general.

With static server mode my body text shows under the header. However, if I change the header to InteractiveServer mode (so I can click the buttons), the body moves up and is hidden by the header?

Below is a GIF which shows my issue.

RenderIssue

Hi @Daryl_G,

This is caused by static rendering - the RadzenLayout doesn't cascade properly in this case which is by Microsoft design. The workaround is to set "position: static" to RadzenHeader:

<RadzenHeader style="position: static">
1 Like

Thank you so much! This has worked. Are you saying that Microsoft has designed it to render static things first and then ServerSide things after?

Also, is this covered in the documentation anywhere? It seems like quite a major thing but I couldn't find any reference to this when I was following this. It may be worth adding it in if it's a common problem.

Kind of. Here is the issue I am referring to.

We don't usually cover Microsoft issues in our documentation. Or do you mean the requirement to set position:static to handle this Blazor bug?

Thank you! Unfortunately this is a bit too complicated for me to understand at this stage in my learning but I never would've associated the issue I came across with as a cascading parameter issue, I thought it was more of a CSS problem!

We don't usually cover Microsoft issues in our documentation. Or do you mean the requirement to set position:static to handle this Blazor bug?

The latter I guess... The first thing I did was copy the code from here which sounds like it is not valid for .NET 8... If that's the case it would be great to at least have a note at the top highlighting the issues/workaround. Similar to how there are Static Server-Side Rendering notes on this page.

I am very new to Blazor and web development in general though so this could be just me being an idiot and may be an obvious thing to others...!

It is that this syntax is not valid for .NET 8 - our online demos use .NET 8 too. The problem is caused by static rendering mode which Microsoft decided to make the default. It comes with all kinds of limitations and what you see is caused by one of them (the linked issue). If you create your application with global interactivity enabled you wouldn't get any of those issues and won't have to deal with the @rendermode attribute anywhere. I would highly recommend that to a new Blazor developer who won't need static rendering mode features right from the start. This would also spare you the "event handlers don't work" problem which comes from static rendering mode.

We will add some banner to the demo to mention that you need position: static in that case.