CODEWITHSUNDEEP
asp.net-coreblazormudblazormudselect
Perfeitor
Perfeitor

Reputation: 87

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

Upvotes: 1

Views: 211

Answers (1)

Perfeitor
Perfeitor

Reputation: 87

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

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

Upvotes: 0

Related Questions