The problem when implemented the Header and SlideBar of the Northwind Main Layout demo app

Hello there, I have a question about the MainLayout.razor of Northwind demo app,

I try to implemented the Header and SlideBar of the Main Layout like this demo

But when I click on RadzenSidebarToggle, seems the Header and the SlideBar was not hide/show correctly. Can you help me check my fault and show me the correct code for that. Thank you.

The my demo project as this link:
The MainLayout.razor file :

@inherits LayoutComponentBase

<RadzenHeader Style="margin-left: 250px;">
            <div class="row justify-content-start align-items-center">
                <div class="col-md-6 d-flex align-items-center">
                    <RadzenSidebarToggle Click="@SidebarToggle0Click">
                    <RadzenLabel Text="Test">
                <div class="col-md-6 text-lg-right">
<RadzenBody @ref="body0">
        <RadzenContentContainer Name="main">
<RadzenSidebar @ref="sidebar0" Style="top: 0px; bottom: 0px; transform: translateX(0px);">
        <RadzenImage Path="" Style="margin: 20px; width: 200px;">

                <RadzenPanelMenuItem Text="First Look" Path="/" Icon="home"></RadzenPanelMenuItem>
                <RadzenPanelMenuItem Text="DataGrid" Path="datagrid" Icon="grid_on"></RadzenPanelMenuItem>
        <RadzenLabel Text="Test, Copyright &copy; 2019">

    protected RadzenBody body0;

    protected RadzenSidebar sidebar0;
    protected async void SidebarToggle0Click(dynamic args)


Many thanks.

Our Blazor demo application is here:
You can check also the source code:

Sorry Radzen Team, my looking for this demo: We have a customize Header and SlideBar like this picture

The screenshot is from our Angular demo - the same stretch behavior for Blazor SideBar is still not added. We will do our best to provide it soon.

1 Like

Hi! Has this been implemented yet? I cannot seem to get the sidebar to display in full height in combination with a header

Yes, this can easily be done now if you use <RadzenLayout>. Just set its style like this:

<RadzenLayout style="grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body' 'rz-sidebar rz-footer'"> 

RadzenLayour specifies four areas of the page - rz-sidebar, rz-header, rz-body and rz-footer and three rows - one for the header, one for the body and one for the footer. Every quoted string represents the contents of a row. For example 'rz-sidebar rz-header means 'first row contains the sidebar and the header'. By default it is 'rz-header rz-header' which means 'the first row contains the header in its both columns'.

1 Like