Mudblazor选择“破碎”在弹出案上

发布于 2025-01-20 08:25:50 字数 1614 浏览 0 评论 0原文

我在泥泞的底座上有一个泥泞的选择,但是在使用选择时,我会遇到一些奇怪的行为。选择的下拉列表不会像其他所有内容一样出现在其他所有内容上,而是将其分层在其他组件下方 /下方,并且是不可亮的。令人困惑的是,简单的重新加载(打开页面时)可以解决问题。有人知道是什么触发了“破碎”行为,然后如何通过重新加载来固定它?还是有人知道如何在进入页面时强迫重新加载的情况下修复它?

当它被打破时
通常应该如何看起来

<MudPopover Open="@_open" RelativeWidth="true" Fixed="true">
    <div class="d-flex flex-column">
        <EditForm Model="@items" Context="itemUpload">
            <MudSelect @bind-Value="selectedH" Margin="Margin.Dense" Variant="Variant.Outlined" Label="whatever" AnchorOrigin="Origin.BottomCenter">
                @foreach (var item in items)
                {
                    <MudSelectItem Value="@item.id">@item.name</MudSelectItem>
                }
            </MudSelect>
        </EditForm>
        <MudButton Disabled="@uploading" OnClick="Upload" Variant="Variant.Filled" Color="Color.Primary">
            @if (uploading)
            {
                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                <MudText Class="ms-2">Processing</MudText>
            }
            else
            {
                <MudText>Upload</MudText>
            }
        </MudButton>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Schlie&szlig;en</MudButton>
    </div>
</MudPopover>

I have a MudSelect on a MudPopover but I encounter a somewhat weird behavior when using the select. The select dropdown will not appear over everything else as it should, but instead, it will be layered behind /underneath other components and is unclickable. The confusing thing about this is that a simple reload (when opening the page) fixes the issue. Does somebody know what triggers the "broken" behavior and how it is then fixed by reloading? Or does somebody know how to fix it without forcing a reload upon entering the page?

when it is broken

how it should normally look

<MudPopover Open="@_open" RelativeWidth="true" Fixed="true">
    <div class="d-flex flex-column">
        <EditForm Model="@items" Context="itemUpload">
            <MudSelect @bind-Value="selectedH" Margin="Margin.Dense" Variant="Variant.Outlined" Label="whatever" AnchorOrigin="Origin.BottomCenter">
                @foreach (var item in items)
                {
                    <MudSelectItem Value="@item.id">@item.name</MudSelectItem>
                }
            </MudSelect>
        </EditForm>
        <MudButton Disabled="@uploading" OnClick="Upload" Variant="Variant.Filled" Color="Color.Primary">
            @if (uploading)
            {
                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                <MudText Class="ms-2">Processing</MudText>
            }
            else
            {
                <MudText>Upload</MudText>
            }
        </MudButton>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Schließen</MudButton>
    </div>
</MudPopover>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

揽清风入怀 2025-01-27 08:25:50

@Inco将其放在评论中,但它似乎是我所见过的最好的解决方案,因此我将其提出了答案。而不是使用mudpopover,使用muddialog。它解决了mudSelect以及muddatePicker的z索引问题

@InCo placed this in the comments, but it appears to be the best solution I have seen, so I pulled this out into an answer. Instead of using MudPopover, use MudDialog. It solves the Z-Index issue for MudSelect as well as MudDatePicker

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文