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;
}
}
1
% 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
2