Aspnetcore: Sticky header in Blazor project templates doesn't set z-index

[ThatFlashCat]

Describe the bug

The blazor project template includes a sticky header at the top of the page. The header does not specify a z-index, so when the content of the page is greater than the view height, some elements will display above the header. I have noticed this in particular with bootstrap alerts:

To Reproduce

Create a blank Blazor template using either server app or web assembly. On index.razor, create a large number of boostrap alerts:

@for(int i = 0; i < 25; i++) { <div class="alert alert-success"> Alert @i </div> }

Load the page and scroll down. The bootstrap alerts will render above the top header. To fix the issue, a z-index of 1 or more must be set on the .top-row class used to style the header.

Exceptions (if any)

Not applicable

Further technical details

• ASP.NET Core version: 3.1.301
• The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version: Visual Studio 2019 16.6.2

[javiercn]

@ThatFlashCat thanks for contacting us.

We'll look into this and update this issue appropriately.

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[michaelrp]

@pranavkm or @javiercn, I can make the change for this. I would just add the z-index to site.css? Should it be 1 or do you want something larger? Added here.

[javiercn]

@michaelrp that sounds good I think. I would make it higher, like 10, but not crazy high so that there is room on both side for adjustment.