I have a MudBlazor app and have often noticed that percentage heights and widths are often ignored.
In my current example I have a MudTab
in which I want to display a MudTreeView
which is scrollable and under the TreeView a button.
But I want to scale the TreeView as a percentage of the MudMainContent
so something like "do not get bigger than 50%" and if it does, I want the treeview to be scrollable.
However, this Style="max-height: 50%;"
on the MudItem
seems to be completely ignored and I wonder why?
For example, if I set Style="max-height: 200px;"
the scrolling works, but I would have to do without the dynamic height and the resposiveness is lost
Here is a TryMudBlazor example
Here is the code:
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="2">
</MudDrawer>
<MudMainContent>
<MudContainer Class="overflow-scroll" MaxWidth="MaxWidth.ExtraLarge" Style="height: calc(100vh - var(--mud-appbar-height)); max-height: calc(100vh - var(--mud-appbar-height));">
<MudTabs Outlined="true" Position="Position.Top" Rounded="true" Border="true" Elevation="6"
ApplyEffectsToContainer="true" Class="mt-8" PanelClass="pa-6" Style="overflow-y: hidden; max-height: 100%;">
<MudTabPanel Text="Test">
<ChildContent>
<MudContainer MaxWidth="MaxWidth.Small">
<MudGrid Justify="Justify.Center" Spacing="2" Class="mb-3">
<!-- max-height: 50% is not working here -->
<MudItem
sm="12"
xs="12"
Style="max-height: 50%;"
Class="overflow-scroll">
<MudTreeView Hover ReadOnly="false"
TriState="false"
AutoSelectParent="true"
SelectionMode="SelectionMode.MultiSelection"
CheckBoxColor="Color.Primary"
T="string"
@bind-SelectedValues="SelectedTreeItems">
@for (int i = 0; i < 50; i++)
{
<MudTreeViewItem Text="@($"Treeview Item {i}")"/>
}
</MudTreeView>
</MudItem>
</MudGrid>
<!-- This button should be visible -->
<MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton>
</MudContainer>
</ChildContent>
</MudTabPanel>
</MudTabs>
</MudContainer>
</MudMainContent>
</MudLayout>
@code {
bool _drawerOpen = true;
private IReadOnlyCollection<string> SelectedTreeItems { get; set; } = [];
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}
%
units are based on its immediate parent so, my first assumption was that there were some elements in between the MudItem
and MudContainer
that were skipped. While this was true, turns out just passing down the max-height
's wasn't enough. Some of the elements needed to use height
instead.
Also, PanelClass
applies a class to mud-tab-panels
container and there is no way to style that directly so you're going to have to use a class.
In the example i've styled the MudGrid
to 50% not the MudItem
as the Button is outside of the grid and we want it to not be included in the scroll, so styling the MudGrid
should be sufficient.
<style>
.my-treeview-tabs-panels {
max-height: 100%;
outline: 1px solid yellow;
}
</style>
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"
OnClick="@(e => DrawerToggle())" />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="2">
</MudDrawer>
<MudMainContent>
<MudContainer Class="overflow-scroll" MaxWidth="MaxWidth.ExtraLarge"
Style="height: calc(100vh - var(--mud-appbar-height)); max-height: calc(100vh - var(--mud-appbar-height));">
<!-- Custom class applied to PanelClass and Style uses height:100% instead of max-height-->
<MudTabs Outlined="true" Position="Position.Top" Rounded="true" Border="true" Elevation="6" ApplyEffectsToContainer="true" Class="mt-8"
Style="overflow-y: hidden; height: 100%;outline:1px solid green;"
PanelClass="pa-6 my-treeview-tabs-panels">
<MudTabPanel Text="Test">
<ChildContent>
<!-- This container uses height -->
<MudContainer MaxWidth="MaxWidth.Small" Style="height: 100%;outline:1px solid blue;">
<!-- max-height: 50% IS APPLIED at the grid level -->
<MudGrid Justify="Justify.Center" Spacing="2" Class="mb-3"
Style="max-height:50%;overflow:scroll; outline: 1px solid orange;">
<MudItem sm="12" xs="12"
Class="overflow-scroll">
<MudTreeView Hover ReadOnly="false" TriState="false" AutoSelectParent="true"
SelectionMode="SelectionMode.MultiSelection" CheckBoxColor="Color.Primary"
T="string" @bind-SelectedValues="SelectedTreeItems">
@for (int i = 0; i
< 50; i++) { <MudTreeViewItem Text="@($" Treeview Item {i}")" />
}
</MudTreeView>
</MudItem>
</MudGrid>
<MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton>
</MudContainer>
</ChildContent>
</MudTabPanel>
</MudTabs>
</MudContainer>
</MudMainContent>
</MudLayout>
Demo 👉 MudBlazor Snippet