Aspnetcore.docs: ASP.NET Core Blazor component virtualization with CSS Grid layout

[SLFD-William]

Hi.

Adding the empty divs at the beginning and end to handle the virtualization throws off the layout if using a CSS Grid since it adds another div in the collection.

Any ideas how to get around this. Setting the display to none or hidden appears to break the Virtualization functionality.

Thanx.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 0f4ab8b4-4d2e-9e1b-793e-dbb17f6d694d
• Version Independent ID: 26ed2425-63ec-e206-edcb-e51f17edb844
• Content: ASP.NET Core Blazor component virtualization
• Content Source: aspnetcore/blazor/components/virtualization.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @SLFD-William ...

empty divs at the beginning and end

Can you confirm if you're referring to the same rendered markup as ...

https://github.com/dotnet/aspnetcore/issues/25982

... paste the rendered HTML into a comment here.

[guardrex]

IMO, the issue that I opened indicates a violation of the HTML spec, which is different than what you're pointing out. I'd just like to understand if you're referring to the same thing before I advise further.

[SLFD-William]

[EDIT by guardrex to add the code block]

<ul class="o-ListTemplate__List c-Photographs__List"><!--!--><div style="height: 0px;" _bl_2=""></div><!--!--><li class="o-Card c-PhotographListItem ColumnSpan2"><div class="c-PhotographListItem__Image"><!--!--><img loading="lazy" src="Content/Images/0000001320200210144829.jpg" asp-append-version="true"></div><div><ul style="list-style:none;"><li style="display:inline"><!--!--><a href="animals/animal/7">Sugar</a></li></ul></div><!--!-->

        <div class="o-ActionBar o-ListItem_ActionBar"><div class="o-ActionButtons o-ActionButtons__Secondary"><button class="safe" type="button" title="Tag"><!--!--><span><i class="fas fa-tag"></i></span></button></div><div class="o-ActionButtons o-ActionButtons__Primary"><button class="safe" type="button" title="Edit"><span><i class="fas fa-edit"></i></span></button><button class="danger" type="button" title="Delete"><!--!--><span><i class="fas fa-trash"></i></span></button></div></div></li><!--!--><li class="o-Card c-PhotographListItem ColumnSpan2"><div class="c-PhotographListItem__Image"><!--!--><img loading="lazy" src="Content/Images/0000001820200216131804.jpg" asp-append-version="true"></div><div><ul style="list-style:none;"><li style="display:inline"><!--!--><a href="animals/animal/146">Rainbow</a></li></ul></div><!--!-->

        <div class="o-ActionBar o-ListItem_ActionBar"><div class="o-ActionButtons o-ActionButtons__Secondary"><button class="safe" type="button" title="Tag"><!--!--><span><i class="fas fa-tag"></i></span></button></div><div class="o-ActionButtons o-ActionButtons__Primary"><button class="safe" type="button" title="Edit"><span><i class="fas fa-edit"></i></span></button><button class="danger" type="button" title="Delete"><!--!--><span><i class="fas fa-trash"></i></span></button></div></div></li><!--!--><div style="height: 0px;" _bl_3=""></div></ul>

[SLFD-William]

thanx for the cleanup on the preceeding post and prompt response guardrex

[guardrex]

Yeah ... so the <div> is _INSIDE_ the <ul> ... a clear HTML spec violation, too.

@SLFD-William ... Open your concern for the product unit at ...

https://github.com/dotnet/aspnetcore/issues

... and I recommend cross-linking my closed issue and mentioning that these are HTML spec violations (if you agree with me on that, too). My closed issue is at ...

https://github.com/dotnet/aspnetcore/issues/25982

Please add a cc: @guardrex to your opening issue comment over there so that I can follow along.

[SLFD-William]

I don't know if it's an HTML violation or not, too deep in the weeds for me. But yeah, I'll cross reference your issue..
Thanx.

[guardrex]

In that case, don't cross-link my issue. Only ask them about your scenario.

[guardrex]

However, please do put a cc: @guardrex at the bottom of your opening comment. I'd still like to see what they say. Thanks.

[SLFD-William]

I'll see if I can edit it and remove the cross link. But you're CC'd

[guardrex]

Yes ... you should be able to edit and remove the cross-link.

[SLFD-William]

mention of your issue removed.

[guardrex]

Thanks.

[SLFD-William]

https://github.com/dotnet/aspnetcore/issues/28056