asp.net-coreblazormudblazormudselect

Why does Blazor virtualization exaggerate the height of a web page?


I have a Blazor web page using MudBlazor, but MudSelect does not support virtualization. If I use a foreach loop to load the entire list, it causes the webpage to lag. Therefore, I turned to Blazor virtualization. Everything worked fine until I discovered that virtualization caused my webpage to have an abnormal height, often being tens to hundreds of times the original height, with the extra length being entirely blank. If I use Take to retrieve a small number of items, it works fine, but in this case, virtualization becomes useless because with such a small number of items, foreach works well, and I can even use a SelectAll box with the loop. Is there a way to fix this virtualization issue?

<MudSelect Variant="Variant.Outlined" Margin="Margin.Dense" T="string" MultiSelection="true" @bind-SelectedValues="@list" Adornment="Adornment.End">
    <Virtualize Items="users">
        <MudSelectItem Value="@context.id"/>
    </Virtualize>
</MudSelect>
@code{
    IEnumerable<string> list = new HashSet<string>();
    IEnumerable<string> users = new HashSet<string>();
    protected override void OnInitialized()
    {
        HashSet<string> hashSet = new HashSet<string>();
        for (int i = 0; i < 1000; i++)
        {
            hashSet.Add(i.ToString());
        }
        users = hashSet;
    }
}

Solution

  • Add a like this around the MudSelect and the problem is fixed:

    <div style="height:55px;overflow-y:hidden;">
       //MudSelect here
    </div>