Question Bootstrap sidebar navmenu problem

[raysefo]

Hi,

I am working on a Blazor Server app. I am using Bootstrap, but the problem is when I click the button It collapses but reopens immediately. What can be the problem?

<main class="sidebarmain">
    <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
            <svg class="bi me-2" width="30" height="24">
                <use xlink:href="#bootstrap"></use>
            </svg>
            @*<span class="fs-5 fw-semibold">Collapsible</span>*@
        </a>
        <ul class="list-unstyled ps-0">
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
                    Home
                </button>
                <div class="collapse" id="home-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/" class="link-dark rounded">Dashboard</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
                    Orders
                </button>
                <div class="collapse" id="dashboard-collapse" style="">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/orders" class="link-dark rounded">Order List</a>
                        </li>
                        <li>
                            <a href="/upload" class="link-dark rounded">Order Upload</a>
                        </li>
                        <li>
                            <a href="/export" class="link-dark rounded">Order Export</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#vendors-collapse" aria-expanded="false">
                    Vendors
                </button>
                <div class="collapse" id="vendors-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/vendors" class="link-dark rounded">Vendor Management</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customers-collapse" aria-expanded="false">
                    Customers
                </button>
                <div class="collapse" id="customers-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/customers" class="link-dark rounded">Customer Management</a>
                        </li>

                    </ul>
                </div>
            </li>
            <li class="border-top my-3"></li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
                    Administration
                </button>
                <div class="collapse" id="account-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/administration" class="link-dark rounded">User Management</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</main>

@inherits LayoutComponentBase

<PageTitle>Vorlance</PageTitle>
<style>
    .pb-3,
    .py-3 {
        padding-bottom: 0.93rem !important;
    }
</style>
<div class="page">
    <div class="sidebar @NavMenuCssClass">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4 auth navbar-light">
            <div class="container-fluid toggler-container">
                <button title="Navigation menu" class="navbar-toggler custom-toggler" @onclick="ToggleNavMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span class="navbar-brand mb-0 h2" href="#">
                    <img src="/css/images/v.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
                    Vorlance
                </span>
                
            </div>
          
            <a href="Identity/Account/Login">Log in</a>
        
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

 

[Skydiver]

Set a breakpoint and find out.

 

[raysefo]

Great idea, how did I not think of it? Thank you.

 

[raysefo]

@Skydiver I did some trial and error on the _Layout.cshtml. When I remove this <link href="IMS.WebApp.styles.css" rel="stylesheet"/> page structure is broken but menu worked correctly. This CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. Any idea how to fix this CSS isolation?

 

[Skydiver]

I know nothing about Blazor CSS isolation, but the documentation seems to show that you can override some of its behavior:

ASP.NET Core Blazor CSS isolation

Learn how CSS isolation scopes CSS to Razor components, which can simplify CSS and avoid collisions with other components or libraries.

docs.microsoft.com

I suspect that the issue is really in your C# code and how it interacts with the page rendering and how that interacts with the CSS. You'll really need to dig into CSS to see why it is doing that collapse behavior.

 

[raysefo]

It works correctly on mobile portrait and landscape but still couldn't find out not working on others.

 

[raysefo]

I found the culprit; I'm looking for where it is in the project