Bootstrap menu not rendering properly in Blazor 0.5

[MarkStega]

The following code in my navmenu.cshtml fails to render properly. Attached are two images. navbar-properlyrendered.png & navbar-blazorrendered.png show the odd styling (notice the layout of the three links) in Blazor.

The proper rendering is in a static html page with the bootstrap css/js imports. The Blazor rendering is from a project derived from the template produced Blazor client.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

NAVBAR-PROPERLY-RENDERED

NAVBAR-BLAZOR-RENDERED

[SteveSandersonMS]

Fixed with 8c452ff71ad1c59af0115747794a313d91ace789

We'll apply a more long-term fix when we reintroduce the markup optimization later.

[MarkStega]

@SteveSandersonMS
@danroth27
The same bad rendering occurs in 0.5.1

[danroth27]

@MarkStega Could you please share a simple project that reproduces the issue? I tried my best to clean up the snippet you posted previously and tried it out in a new Blazor app. I did see the weird styling issue briefly, but it seemed to be caused by an odd interaction with the default site.css included in the template.

[MarkStega]

@danroth27 Here is a sample:

1. Create a new Blazor (ASP.Net Core Hosted) project.
2. Replace index.cshtml with

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

(3) Replace navmenu.cshtml with

<nav class="navbar navbar-expand-md navbar-light bg-light nav-pills nav-fill">
    <a class="navbar-brand" href="ormanagerview">Optimiser.NG.Blazor</a>
    <button class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="fetchdata">Weather</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link active" data-toggle="tab" href="index">Index</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="counter">Counter</a>
            </li>
        </ul>
    </div>
</nav>

(4) Replace mainlayout.cshtml with

@inherits BlazorLayoutComponent

<div class="content px-4">
    <NavMenu />
</div>

<div class="main">
    <div class="content px-4">
        @Body
    </div>
</div>

[chucker]

@MarkStega I think I can reproduce it, but isn't the issue simply this CSS statement?

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

[Andrzej-W]

@MarkStega Please note that application created by Visual Studio has a design with main menu on the left (on big screen) and "hamburger" menu on small screen. It works differently than standard Bootstrap library which uses jquery to create some interactivity.

You have to analyse wwwroot\css\site.css file and especially all definitions related to .nav-item class. You will find padding-bottom for all items, padding-top for first item, and bigger padding-bottom for last item. You have to correct all this definitions according to your design (probably you want to remove all of them if you want to have standard Bootstrap menu).

[MarkStega]

@chucker @Andrzej-W

Thanks, I never thought of looking at site.css and indeed the navitem css all needs to be removed. I am looking at using BlazorStrap components to avoid the jquery issues. I guess I am struggling a bit with the use of Bootstrap and trying to figure out what is useable and what is not.