Share via

Bootstrap/Nav Tabs not working after update

Question

Wednesday, February 21, 2018 8:58 PM

I am not sure what caused this (I am inclined to blame Team Foundation Server, because I just hate it), but here is what is happening.

We have these tabsets.

<!-- Upper Tabs - Exact & Partial Results -->
<ul class="nav nav-tabs largetabs">
    <li class="active"><a data-toggle="tab" href="#exactTab"><h4>Exact Matches</h4></a></li>
    <li><a data-toggle="tab" href="#partialTab"><h4>Partial Matches</h4></a></li>
</ul> <!-- /largetabs-->

And these pages

<div class="tab-content">
    <div id="exactTab" class="tab-pane largetabpane fade in active">
...
    <div id="partialTab" class="tab-pane largetabpane fade">
...

This seems to comply with the tutorials I am seeing online.

It's important to note that this is happening site-wide, not just on this page.  Also, this worked last week before a particularly fateful TFS Get Latest.

Here is the symptom.

  1. When the second tab is clicked, the page pane blanks, and the second tab does not highlight.
  2. When the first tab is clicked again, it returns to the correct first pane and the first tab remains highlighted.

I figure either some library is not getting loaded, or the matching mechanism from the tabs to the panes has changed somehow.

All replies (8)

Thursday, February 22, 2018 10:08 PM âś…Answered

OK, Here's how I got it working with jQuery 3.3.0.

FIRST: I addes these classes after the old nav-tab classes in the site.css file,

    .nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li > a {
        border: none;
        color: #666;
    }
    .nav-tabs > li.nav-item > a,
    .nav-tabs > li.nav-item > a:hover {
        border: none;
        color: #4285F4 !important;
        background: transparent;
        ;
    }
    .nav-tabs > li.nav-item > a::after {
        content: "";
        background: #4285F4;
        height: 2px;
        ;
        width: 100%;
        left: 0px;
        bottom: -1px;
        transition: all 250ms ease 0s;
        transform: scale(0);
    }
    .nav-tabs > li.nav-item > a.active::after,
    .nav-tabs > li.nav-item:hover > a::after {
        transform: scale(1);
    }

    .card {
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    }

Now I took out the class="active" from all the <li> tags and added class="nav-item" to them.

Then I added class="active show" to the initially selected <a> tag.

Then I found every tab-pane and made sure it had fade in (rather than just fade). 

new rule: fade does not work without in.  You get a blank tab-pane.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h4>Index</h4>

<h4>Tabsperimentation</h4>

Tabset


    <div class="nav navbar-default">
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="active show" data-toggle="tab" href="#TabA">GO TO TAB A</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#TabB">GO TO TAB B</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#TabC">GO TO TAB C</a></li>
        </ul>
    </div>

    <div class="tab-content">
        <div id="TabA" class="tab-pane fade in active">
            THIS IS TAB A
        </div>

        <div id="TabB" class="tab-pane fade in">
            THIS IS TAB B
        </div>

        <div id="TabC" class="tab-pane fade in">
            THIS IS TAB C
        </div>
    </div>

Wednesday, February 21, 2018 9:32 PM

I assume someone checked something in that caused the conflict; added a click handler or referenced a client API.  Look at the history.

Bootstrap tabs are fairly basic.  The class=active attribute sets the active tab and the associated div get a "fade in" which shows the div.

Look at the source code in Dev tools while clicking the tabs to see if the elements classes are changing when the tabs are clicked.  Look in the console for errors.  Look at the CSS assigned to the elements... etc... basic client side troubleshooting.

Craft a quick Bootstrap tab page as a template so you can see what to expected when clicking a tab.

Wednesday, February 21, 2018 11:01 PM

Actually (this is why I hate TFS) I got the whole site working, and the other guy checked it out, but got 61 compile errors.  we tried to resolve them, but when he checked in his 2 CSS changes, the site was toast.

I rolled back all the changes and redid them on my machine, and it all worked, but now we went through another round and it's not working again.

I looked through the project, and found that we had 3 versions of jQuery, old Bootstrap, I got rid of Application Insights, and cleaned up the library and reference situations.

Now everything in the project is updated to the latest versions, and all unused crap has been removed.

The 2 or 3 css changes that the other developer did should not be messing this up (famous last words).

Not sure what you mean by "Dev Tools"  is that a Visual Studio plugin, or something else?

I'll create a plain-jane tab page and report how it goes.

Wednesday, February 21, 2018 11:34 PM

Ok, it's not in the pages... I made this page...

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h4>Index</h4>

<h4>Tabsperimentation</h4>

Tabset

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#TabA">GO TO TAB A</a></li>
    <li><a data-toggle="tab" href="#TabB">GO TO TAB B</a></li>
    <li><a data-toggle="tab" href="#TabC">GO TO TAB C</a></li>
</ul>

<div class="tab-content">
    <div id="TabA" class="tab-pane fade in active">
        THIS IS TAB A
    </div>
    <div id="TabB" class="tab-pane fade">
        THIS IS TAB B
    </div>
    <div id="TabC" class="tab-pane fade">
        THIS IS TAB C
    </div>
</div>

... and it worketh not.

At this point I suspect that we are not including some bootstrap or jQuery library.

Here is the top of my _Layout page...

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")

...and here is my BundleConfig.cs

    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*",
                      "~/Scripts/ChromeSafariFix.js",
                      "~/Scripts/jquery.jTableScroll.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js",
                      "~/Scripts/custom.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/Sandstone.bootstrap.css",
                      "~/Content/jquery-ui.css",
                      "~/Content/font-awesome.min.css",
                      "~/Content/Site.css",
                      "~/Content/sspco.css"
                      ));
        }
    }

Thursday, February 22, 2018 12:14 AM

Do some basic troubleshooting, remove one js API at a time until you find the conflict. I would start with jqueryui.

Or start with a working tab demo and add one API at a time until you find the conflict. 

Thursday, February 22, 2018 7:22 AM

Hi some_yahoo,

It seems you are using some custom css files.

I've tried this code. In my code, I'm quoting three files for this function.

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

Then it works well. Remove any one of them, it will not work. You can try it yourself.

Demo:

@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

Tabset

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#TabA">GO TO TAB A</a></li>
    <li><a data-toggle="tab" href="#TabB">GO TO TAB B</a></li>
    <li><a data-toggle="tab" href="#TabC">GO TO TAB C</a></li>
</ul>

<div class="tab-content">
    <div id="TabA" class="tab-pane fade in active">
        THIS IS TAB A
    </div>
    <div id="TabB" class="tab-pane fade">
        THIS IS TAB B
    </div>
    <div id="TabC" class="tab-pane fade">
        THIS IS TAB C
    </div>
</div>

Best Regards,

Daisy

Thursday, February 22, 2018 4:07 PM

IS there something wrong with jQuery-3.3.1.js?  Should I roll back that far?  Here are my rendered scripts and stylesheets...

<link href="/Content/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/Sandstone.bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/sspco.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-3.3.1.js"></script>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

I'm not sure what "Sandstone.Bootstrap" is, maybe that's the problem

Thursday, February 22, 2018 4:37 PM

Something else...

When inspecting the elements, it seems that the bootstrap code is modifying the <a> tags instead of the <li> tags...

            <li><a class="" data-toggle="tab" href="#TabA">GO TO TAB A</a></li>
            <li><a data-toggle="tab" href="#TabB" class="">GO TO TAB B</a></li>
            <li><a data-toggle="tab" href="#TabC" class="active show">GO TO TAB C</a></li>

Clicking the tab moves active show from one <a> tag to the other.  whereas the older working version of the site looks like this...

<li class="active"><a data-toggle="tab" href="#exactTab" aria-expanded="true"><h4>Exact Matches</h4></a></li>
<li class=""><a data-toggle="tab" href="#partialTab" aria-expanded="false"><h4>Partial Matches</h4></a></li>

...where the "active" class is put on the <li> object.

It seems there has been something changed in the tab libraries.  I wonder where the tutorials are for that?

  • Last updated on