dotnet/aspnetcore

Blazor Template Site CSS Breaks Bootstrap Tabs

xJonathanLEI opened this issue · 6 comments

xJonathanLEI commented

Describe the bug

The following lines from site.css breaks Bootstrap tabs:

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

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

Bootstrap tabs are broken as shown in the following screenshot:

BootstrapTabBug

To Reproduce

Steps to reproduce the behavior:

  1. Create a client-side Blazor project with dotnet new blazor

  2. Replace the body element in wwwroot/index.html with the following:

     <body>
     <nav>
         <div class="nav nav-tabs" id="nav-tab" role="tablist">
             <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                 aria-controls="nav-home" aria-selected="true">Home</a>
             <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                 aria-controls="nav-profile" aria-selected="false">Profile</a>
             <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
                 aria-controls="nav-contact" aria-selected="false">Contact</a>
         </div>
     </nav>
     <div class="tab-content" id="nav-tabContent">
         <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
         <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
         <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
     </div>
 </body>

  3. Run the project

  4. See error

Expected behavior

The tabs should have looked like this:

BootstrapTabExpected

Solution

Simply changed the aforementioned CSS lines to the following:

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

li.nav-item:last-of-type {
    padding-bottom: 1rem;
}

The problem goes away ;)

Additional context

.NET Core SDK Version: 3.0.100-preview6-012264

mkArtakMSFT commented

Thanks for contacting us, @xJonathanLEI.
Would you like to send us a PR with your proposed fix? We'd happily consider it.

xJonathanLEI commented

Sure. Just did ;)

javiercn commented

@mkArtakMSFT I'm giving this to @SteveSandersonMS as he did the layout for those templates and has a better handle than me regarding how they are supposed to work, and potentially the only work here is to validate and merge the PR.

SteveSandersonMS commented

Note to self: when fixing this, also consider #14463

SteveSandersonMS commented

Will be fixed by #14463 when that's merged.