Mudblazor选择“破碎”在弹出案上
我在泥泞的底座上有一个泥泞的选择,但是在使用选择时,我会遇到一些奇怪的行为。选择的下拉列表不会像其他所有内容一样出现在其他所有内容上,而是将其分层在其他组件下方 /下方,并且是不可亮的。令人困惑的是,简单的重新加载(打开页面时)可以解决问题。有人知道是什么触发了“破碎”行为,然后如何通过重新加载来固定它?还是有人知道如何在进入页面时强迫重新加载的情况下修复它?
<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>
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
@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
, useMudDialog
. It solves the Z-Index issue forMudSelect
as well asMudDatePicker