CODEWITHSUNDEEP
twitter-bootstrap
Johann
Johann

Reputation: 186

Bootstrap ScrollSpy seems to be breaking Bootstrap tabs

I've been trying to implement ScrollSpy on a page which uses tabs.

This is my body tag:

<body data-spy="scroll" data-target=".subnav" data-offset="50">

This is my tabs HTML:

<div class="div-tabs tabbable">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="" data-toggle="tab" data-target="#home">Home</a></li>
        <li><a href="" data-toggle="tab" data-target="#profile">Profile</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="home">
            <div class="padding16">
                   ...
            </div>
            <div class="button-bar">
                <a href="#" class="btn"><i class="icon-user"></i>Button</a> <a href="#" class="btn btn-primary">
                    <i class="icon-time icon-white"></i>Button</a> <a href="#" class="btn btn-warning">Button</a>
                <a href="#" class="btn btn-danger">Button</a> <a href="#" class="btn btn-success">Button</a>
            </div>
        </div>
        <div class="tab-pane " id="profile">
            <div class="padding16">
               ...
            </div>
            <div class="button-bar">
               <a href="#" class="btn btn-warning">Button</a>
                <a href="#" class="btn btn-danger">Button</a> <a href="#" class="btn btn-success">Button</a>
            </div>
        </div>
    </div>
</div>

If I remove the data-spy="scroll" data-target=".subnav" data-offset="50" from the tag, my tabs work fine. With the scrollspy enabled, I get this error in Chrome dev tools:

Uncaught TypeError: Cannot read property 'top' of null

Any idea what could be wrong? It looks like ScrollSpy is causing Bootstrap tabs to not find references to the HREF attribute.

I'm using Bootstrap 2.0.2

Upvotes: 3

Views: 3241

Answers (1)

jhedstrom
jhedstrom

Reputation: 3388

I saw this error when I had links in the nav to anchors that did not yet exist in the markup. For instance, if a link in the navbar links to #about, but no element exists on the page with id="about", you'll see this error.

Upvotes: 12

Related Questions