Angular JS: Bootstrap tab is not showing properly

Question

Why the tabs are not shown with AngularJS tabbale directive.

This is optional part of angularJS, which is used everywhere in the docs (here)

The source of the directive is here.

I don't see any special css in the doc site.

EDIT:

the markup of the plunkr (above) was copied from the doc link given above. But, when tried with the markup on Angular main page (angularjs.org), it works. Not sure how it works at doc site. The working markup has data-toggle attributes, and url fragments to tab pane.

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class=""><a href="#project-html" data-toggle="tab">index.html</a></li>
        <li class=""><a href="http://angularjs.org/#project-js" data-toggle="tab">project.js</a></li>
        <li class=""><a href="http://angularjs.org/#list-html" data-toggle="tab">list.html</a></li>
        <li class="active"><a href="http://angularjs.org/#detail-html" data-toggle="tab">detail.html</a></li>
        <li class=""><a href="http://angularjs.org/#mongolab-js" data-toggle="tab">mongolab.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="project-html">
            <h1>project</h1>
        </div>
        <div class="tab-pane" id="project-js">
            <h1>project js</h1>

        </div>
        <div class="tab-pane" id="list-html">
            <h1>project html</h1>

        </div>
        <div class="tab-pane active" id="detail-html">
        </div>
        <div class="tab-pane" id="mongolab-js">
        </div>
    </div>
</div>

Ganaraj · Accepted Answer · 2012-10-07 08:58:13Z

1

There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).

In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like

$(".tabbable").tabs();

in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.

answered Oct 7, 2012 at 8:58

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bsr Over a year ago

Well, I use directive, as it is used in the docs, in my plunkr too. It is injected as 'bootstrap', and you can see the tabs work because of that. If you remove it, there is no tab behavior. Not a big deal, as I use the markup from the main page.

Collectives™ on Stack Overflow

Angular JS: Bootstrap tab is not showing properly

EDIT:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related