Blazor Virtualize: root-level scrolling breaks on horizontal scroll enabled in the container #58200
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
When placing the Virtualize into a horizontally scrollable container it breaks and only ever shows the top 1000 rows if we hide the container y axis scroller that appears on the component. By design the whole page should be scrollable and a second vertical scroller shouldn't be added but it is and it makes the page look weird. If we hide it then the Virtualize component breaks as described, leaving it on and having two scrollers appear on the page makes for bad UX though so that is not an option for us.
The horizontal scrolling is needed here because there are enough simulated columns that do not fit in one screen width and that is what is our use case that the customer wants to have in the application.
Expected Behavior
The Virtualize component shows new items on scrolling to the end of the visible list of items, only one scrollbar is shown on the whole page.
Steps To Reproduce
- create a new project in Blazor WASM
dotnet new blazorwasm - add the following page to the Pages folder
@page "/virtualized-table" <PageTitle>Virtualized Table</PageTitle> <HeadContent> <style> html, body { overflow-y: scroll } </style> </HeadContent> <h1>Virtualized Table Example</h1> <button @onclick="LoadData">New data</button> <div style="position: relative; overflow-x:auto; overflow-y: hidden;"> <table id="virtualized-table" style="width: 100%; table-layout: auto; text-align: left; font-size: 0.75rem; line-height: 1.25rem;"> <thead style="position: sticky; top: 0; background-color: silver"> <tr> <th>Item</th> @for (var i = 0; i < 20; i++) { <th style="text-wrap: nowrap">Another column</th> } </tr> </thead> <tbody style="@(isLoading ? "opacity: 0.75" : "")"> <Virtualize Items="fixedItems" ItemSize="30" SpacerElement="tr"> <tr @key="context" style="height: 30px;" id="row-@context"> <td>Item @context</td> <td>Another value</td> </tr> </Virtualize> </tbody> </table> </div> @code { private List<Guid> fixedItems = new List<Guid>(); private bool isLoading = false; protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (firstRender) { await LoadData(); } } private async Task LoadData() { isLoading = true; await InvokeAsync(StateHasChanged); // simulate long fetch from server await Task.Delay(3000); var maxRange = Math.Min(new Random().Next(), 10000); fixedItems = Enumerable.Range(0, maxRange).Select(item => Guid.NewGuid()).ToList(); isLoading = false; await InvokeAsync(StateHasChanged); } } Exceptions (if any)
No response
.NET Version
8.0.400
Anything else?
No response