Responsive table css breaks Virtualize component

[kolkonos]

When rendering a table with the Virtualize component, if we add a responsive class from bootstrap (which adds the following: display: block ; width: 100%; overflow-x: auto;) to the table, the Virtualize component breaks, thus loading all items on the page as if it were a traditional for loop. The main style that causes the break is the overflow-x

However, adding those style changes to the table (or adding the class from bootstrap) after the page has fully rendered and the virtualization is working, DOES NOT break the component. This means that technically we could add the css after the page has completed loading without issues, but I cannot seem to find a point in the life cycle where I can add the CSS or style from the @code block.
It would seem as though the virtualize component cannot figure out the number of rows that would occupy the page, and thus returns them all to the UI.

I tried adding an ItemSize and OverscanCount, but it makes no difference. Neither did adding an actual height on the <tr> inside the virtualize.

To Reproduce

working:
<table class="table table-sm table-hover">
<thead>..something</thead>
<tbody>
<Virtualize Items="articoli"><tr><td>..something here<td/></tr></Virtualize>
</tbody></table>

NOT working:
<table class="table table-sm table-hover" style="display: block ; width: 100%; overflow-x: auto;">
<thead>..something</thead>
<tbody>
<Virtualize Items="articoli"><tr><td>..something here<td/></tr></Virtualize>
</tbody></table>

Further technical details

• .NET 5
• VS 2019

[mrlife]

Duplicate of #28641

[kolkonos]

I see that the other post received a comment stating that the issue is with how the component looks for the closest scrollable parent to determine the size of the viewable area, and then the number of rows to render, however the responsive table css is not intended to alter the vertical scrolling, so I have two suggestions.

1. Let the component look for the closest scrollable parent on the y axis, rather than scrollable overall... or
2. Allow code to alter css classes after the component has rendered. I could not find a point in the renderer life cycle where I could do work after the page has been Fully rendered

[kolkonos]

As help to anyone else running into this issue... I added a workaround using jsInterop.
in the OnAfterRenderAsync() firstRender I call a js function that sets a timeout of x seconds before running a simple jQuery toggleClass to the table. The time out is there so that the virtualize component has enough time to render itself.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await jsRuntime.InvokeVoidAsync("makeTableResponsive");
...

function makeTableResponsive() {
var timer = 2000;
setTimeout(function () { $('#filtered-table').toggleClass('table-responsive-lg', true) }, timer);
}