Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudBlazor max height ignored

$
0
0

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;    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>