Search code examples
cssrazorblazormudblazor

MudBlazor - Page layouting

I am currently trying to create a MudBlazor WebApp. As I am quite new to MudBlazor I try to figure out how the spacing and page layouting works.

So i took a very basic layout from the MudBlazor Wireframes with drawer left and top appbar.

So my MainLayout.razor looks like this:

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="2">
        <MudDrawerHeader>
            <MudText Typo="Typo.h5" Class="mt-1">@Configuration["ApplicationSettings:AppName"]</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

And my page layout:

<MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: 90vh;"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

So this is what is rendered: enter image description here

Now there are two main problems that bother me

  1. As you can see there is a vertical scrollbar because the yellow area flows out... I would like the yellow area to have a fixed height and the blue/aqua and red areas to take up the remaining vertical space. Something like height: auto or something like that. I thought 90vh means 90% of the parent containers height but appearently something went wrong here
  2. There is also a horizontal scrollbar I cant explain as i am just working with the MudGrid which I can't even really influence and 12 stands for take whole available space
Solution

  • You need to account for the space that the AppBar uses.

    <MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

    Full example here