MudBlazor 忽略最大高度

Question

我有一个 MudBlazor 应用程序，并且经常注意到百分比高度和宽度经常被忽略。

在我当前的示例中，我有一个

MudTab

，我想在其中显示一个可滚动的

MudTreeView

，并且在 TreeView 下有一个按钮。

但是我想将 TreeView 缩放为

MudMainContent

的百分比，因此类似于“不要大于 50%”，如果是，我希望树视图是可滚动的。

但是，

Style="max-height: 50%;"

上的这个

MudItem

似乎完全被忽略了，我想知道为什么？

例如，如果我设置

Style="max-height: 200px;"

滚动可以工作，但我将不得不没有动态高度并且响应性会丢失

这是一个 TryMudBlazor 示例

这是代码：

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

Answer 1

%

单位基于其直接父级，因此，我的第一个假设是

MudItem

和

MudContainer

之间存在一些被跳过的元素。虽然这是事实，但事实证明仅仅传递

max-height

是不够的。有些元素需要使用

height

来代替。

此外，

PanelClass

将类应用于

mud-tab-panels

容器，并且无法直接设置样式，因此您必须使用类。

在示例中，我将

MudGrid

的样式设置为 50%，而不是

MudItem

，因为按钮位于网格之外，我们希望它不包含在滚动中。

<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));">
            <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>
                        <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;">
                                <!-- max-height: 50% is not working here -->
                                <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>
                            <!-- This button should be visible -->
                            <MudButton Variant="Variant.Filled" Color="Color.Primary">Primary</MudButton>
                        </MudContainer>
                    </ChildContent>
                </MudTabPanel>
            </MudTabs>
        </MudContainer>
    </MudMainContent>
</MudLayout>

演示 👉 MudBlazor 片段