Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blazor Template Site CSS Breaks Bootstrap Tabs #11267

Closed
xJonathanLEI opened this issue Jun 16, 2019 · 6 comments
Closed

Blazor Template Site CSS Breaks Bootstrap Tabs #11267

xJonathanLEI opened this issue Jun 16, 2019 · 6 comments
Assignees
@SteveSandersonMS
Labels
area-blazor Includes: Blazor, Razor Components bug This issue describes a behavior which is not expected - a bug. component ecosystem Indicates an issue which also has impact on 3rd party component ecosystem Done This issue has been fixed help wanted Up for grabs. We would accept a PR to help resolve this issue
Milestone
3.1.0-preview2

Comments

@xJonathanLEI
Copy link

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
@Eilon Eilon added the area-blazor Includes: Blazor, Razor Components label Jun 17, 2019
@mkArtakMSFT
Copy link
Member

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

@mkArtakMSFT mkArtakMSFT added bug This issue describes a behavior which is not expected - a bug. PRI: 2 - Preferred labels Jun 17, 2019
@mkArtakMSFT mkArtakMSFT added this to the 3.0.0-preview9 milestone Jun 17, 2019
xJonathanLEI added a commit to xJonathanLEI/AspNetCore that referenced this issue Jun 17, 2019
@xJonathanLEI
Fix Blazor CSS bug that breaks other components dotnet#11267
f632adb
@xJonathanLEI xJonathanLEI mentioned this issue Jun 17, 2019
Closed
@xJonathanLEI
Copy link
Author

Sure. Just did ;)

@javiercn
Copy link
Member

@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.

@mkArtakMSFT mkArtakMSFT modified the milestones: 3.0.0-preview9, 3.1.0 Jul 17, 2019
@mkArtakMSFT mkArtakMSFT modified the milestones: 3.1.0, 5.0.0 Aug 12, 2019
@mkArtakMSFT mkArtakMSFT modified the milestones: 5.0.0, Backlog Aug 19, 2019
@mkArtakMSFT mkArtakMSFT added the help wanted Up for grabs. We would accept a PR to help resolve this issue label Aug 19, 2019
@danroth27 danroth27 added the component ecosystem Indicates an issue which also has impact on 3rd party component ecosystem label Sep 17, 2019
@mkArtakMSFT mkArtakMSFT modified the milestones: Backlog, 3.1.0-preview2 Sep 17, 2019
@adrianwright109 adrianwright109 mentioned this issue Sep 26, 2019
Merged
@SteveSandersonMS
Copy link
Member

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

@SteveSandersonMS
Copy link
Member

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

@SteveSandersonMS
Copy link
Member

SteveSandersonMS commented Oct 17, 2019 •
edited
Loading

Done in #14463

@SteveSandersonMS SteveSandersonMS added Done This issue has been fixed and removed Working labels Oct 17, 2019
@ghost ghost locked as resolved and limited conversation to collaborators Dec 3, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@SteveSandersonMS SteveSandersonMS

Labels
area-blazor Includes: Blazor, Razor Components bug This issue describes a behavior which is not expected - a bug. component ecosystem Indicates an issue which also has impact on 3rd party component ecosystem Done This issue has been fixed help wanted Up for grabs. We would accept a PR to help resolve this issue
Projects
None yet
Milestone
3.1.0-preview2
Development

No branches or pull requests
6 participants
@Eilon @SteveSandersonMS @danroth27 @javiercn @xJonathanLEI @mkArtakMSFT