BlazorBootstrapLayout CSS .bb-top-row-sticky z-index magic number too low

[daball]

Describe the bug

The default z-index for @media(min-width: 641px) { .bb-top-row-sticky {} } media class is set to default value of 1. That seems good enough for some things. But consider when I have set the Accordion header z-index is set to 10 and make the Accordion header sticky as well, it will scroll over top of the top-bar component. I would think the number could be higher. And I think I should be able to vary it which I have not been able to do.

To Reproduce

Steps to reproduce the behavior:

1. Add a <BlazorBootstrapLayout StickyHeader="true" HeaderSectionCssClass="custom-class"> with a <HeaderSection><SectionOutlet SectionName="Header"> in the MainLayout.razor. Also be sure to have have @Body in the <ContentSection>.
2. Add a <SectionContent SectionName="Header"> to any Page.razor that uses MainLayout with something that will take up some space, maybe with it's own Background color or height and text content.
3. On that same Page.razor, add multiple <Accordion><AccordionItem><TitleTemplate>Title structures and enough Lorem ipsum content both within the Accordion <Content> and also after the Accordion block so that you can ensure it will scroll. On the Page.razor.css, be sure to set CSS code. In my case I have set z-index to 10.

::deep .card-header {
    position: sticky !important;
    top: 6.5vh;
    z-index: 10;
}
::deep .accordion-header {
    position: sticky !important;
    top: 12vh;
    z-index: 10;
}

4. Load project, observe scroll z-index behavior where Accordion is visible over top of the Header, which is not expected or desired.

Expected behavior

I have attempted using the HeaderSectionCssClass property to append my own class. However, after attempting several ways, I was unable to get it to override the @media(min-width: 641px) { .bb-top-row-sticky { z-index: 1; } } CSS media property. I would think you might can do the same thing you did for :root { --bb-preload-modal-z-index, --bb-preload-modal-backdrop-z-index, --bb-confirm-dialog-z-index, and --bb-confirm-dialog-backdrop-z-index } which could provide those variables and then use the defined constant like so:

:root {
    --bb-top-row-z-index: 20; /* if high enough? */
}
@media(min-width: 641px) {
    .bb-top-row-sticky {
        z-index: var(--bb-top-row-z-index);
    }
}

Screenshots

This screenshot shows the undesired effect of the magic z-index value of 1.

This screenshot shows the DevTools and the affected CSS block.

This screenshot shows some DevTools CSS patch that fixes the problem.

This shows the modified CSS behavior.

The affected file is your blazorbootstrap/blazorbootstrap/wwwroot/blazor.bootstrap.css file. Here's a great spot to add the variable declaration.

Here's where you would need to use the variable.

I suspect but have not proven yet that I could override your :root {} declarations in my own CSS. However, I think that might only work if using a variable rather than the magic number 1. In this case, 20 is high enough to hide my CSS customized z-index: 10 accordions, but 2 might be high enough for my particular case. If I set the accordion z-index to 2, it's higher than the .bb-top-bar-sticky, so the undesired effect. If I set the accordion z-index to 1, it's the same level, and it does the same thing. If I set the accordion z-index to 0, page components are on top of the accordion when scrolling, since everything else has a z-index value of 0 by default. Less than 0 and it disappears behind the page. If I could set the Accordion to 0.5 that would be nice, but it only allows for integers.

Versions (please complete the following information):

• .NET Version: [e.g. .NET 6, .NET 7, .NET 8, .NET 9]
• BlazorBootstrap: [e.g. 2.0.0, 2.1.0, 2.2.0]
• Blazor WebAssembly / Server: [e.g. WebAssembly, Server]
• Blazor Interactive Render Mode: [e.g. Auto, Server, WebAssembly, None]
• Blazor Interactivity Location: [e.g. Global, Per page/component]

Sample code
Not provided at this time. Let me know if you need me to construct a sample.

GitHub repo
None provided.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version [e.g. 22]: 141.0.3537.57 (Official build) (64-bit)

Additional context

Additional CSS may be required, since that z-index is part of a media query. I would need the z-index to be greater than Accordion headers no matter the size of the screen. Be sure to also test the fix on screens smaller than 641px. Let me know if you need anything else to expedite a fix. I can probably fork and send you a pull request with the suggested changes. There are perhaps other possible ways to solve the problem, e.g. . add a HeaderSectionZIndex property to BlazorBootstrapLayout and using an inline style.