RadzenLayout responsiveness

Radzen.Blazor Components
1

Hello guys
I am developing a Blazor WASM app in which I use all of your components(which are fantastic)
but for some reason I cannot configure the layout to be responsive.
Can you give me some hints how should I tweak it ?
Screenshot
MainLayout looks like this (code mainly copied from your examples)

@inherits LayoutComponentBase

<UpdateAvailableDetector />
<RadzenLayout>
    <AuthorizeView>
        <Authorized>
            <RadzenHeader>
                <ChildContent>
                    <div class="row justify-content-start align-items-center">
                        <div class="col-5 d-flex align-items-center">
                            <RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">
                            </RadzenSidebarToggle>
                        </div>
                        <div class="col-7 d-flex align-items-center justify-content-end">
                            <AccessControl></AccessControl>
                        </div>
                    </div>
                </ChildContent>
            </RadzenHeader>
            <RadzenSidebar @bind-Expanded="@sidebarExpanded" class="demos-sidebar" style="display: flex; flex-direction: column">
                <div style="flex: 1; overflow: auto">
                    <RadzenPanelMenu Match="NavLinkMatch.Prefix">
                        <RadzenPanelMenuItem Text="Компоненти" Icon="line_style" Path="/components" />
                        <RadzenPanelMenuItem Text="Обекти" Icon="account_balance" Path="/constructions" />
                        <RadzenPanelMenuItem Text="Потребители" Icon="account_box" Path="/users" />
                        <RadzenPanelMenuItem Text="Продукти" Icon="extension" Path="/products" />
                        <RadzenPanelMenuItem Text="Поръчки" Icon="assignment" Path="/orders" />
                    </RadzenPanelMenu>
                </div>
            </RadzenSidebar>
        </Authorized>
    </AuthorizeView>
    <RadzenBody @bind-Expanded="@bodyExpanded">
        <ChildContent>
            <RadzenContentContainer Name="main">
                <div class="container-fluid example-container">
                    <div class="row">
                        <div class="col-12 pt-4 pb-5 px-3 px-lg-5">
                            @Body
                        </div>
                    </div>
                </div>
            </RadzenContentContainer>
        </ChildContent>
    </RadzenBody>
</RadzenLayout>

Thank you for the good work with Blazor Components.

2

Hi @Ivelin_Kotsev,

Wrapping everything in RadzenLayout should be enough. In the past we used different technique (collapsing the sidebar and expanding the body however this is now obsolete) - you can remove the bindings to Expanded properties.

3

Removing the Expanded property of body is ok, but removing it from the sidebar breaks the sidebar. I am using the latest version of Radzen and bootstrap 5.2
I've uploaded the app App on mobile everything is just way to zoomed out, if I rotate the phone in landscape it looks good, but in portrait it doesn't.

this is my index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>ConstructionWASM</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />

    <!-- If you add any scoped CSS files, uncomment the following to load them -->
    <link href="ConstructionWASM.Client.styles.css" rel="stylesheet" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link href="css/custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="sw-registrator.js"></script>

    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>

my App.razor


<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <p>Determining session state, please wait...</p>
                </Authorizing>
                <NotAuthorized>
                    <a href="authentication/login">Log in <i class="fa-solid fa-right-to-bracket"></i></a>
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

and MainLayout.razor


@inherits LayoutComponentBase

<UpdateAvailableDetector />

<RadzenLayout>
  @*  <AuthorizeView>
        <Authorized>*@
            <RadzenHeader>
                <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)">
                </RadzenSidebarToggle>
                <AccessControl></AccessControl>
            </RadzenHeader>
@*        </Authorized>
    </AuthorizeView>*@
    <RadzenBody>
        <ChildContent>
            <RadzenContentContainer Name="main">
                @Body
            </RadzenContentContainer>
        </ChildContent>
    </RadzenBody>
@*    <AuthorizeView>
        <Authorized>*@
            <RadzenSidebar style="display: flex; flex-direction: column" @bind-Expanded="@sidebarExpanded">
                <RadzenPanelMenu Match="NavLinkMatch.Prefix">
                    <RadzenPanelMenuItem Text="Компоненти" Icon="line_style" Path="/components" />
                    <RadzenPanelMenuItem Text="Обекти" Icon="account_balance" Path="/constructions" />
                    <RadzenPanelMenuItem Text="Потребители" Icon="account_box" Path="/users" />
                    <RadzenPanelMenuItem Text="Продукти" Icon="extension" Path="/products" />
                    <RadzenPanelMenuItem Text="Поръчки" Icon="assignment" Path="/orders" />
                </RadzenPanelMenu>
            </RadzenSidebar>
@*        </Authorized>
    </AuthorizeView>*@
</RadzenLayout>

@code {
    bool sidebarExpanded = true;
}
4

This isn't controlled by RadzenLayout. This done via a meta tag: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos.Host/Pages/_Host.cshtml#L10

   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
1 Like
5

Thank you for the hint, I would never figure this out.
Merry Christmas.