Search code examples
angularjstwitter-bootstrapnav-pills

Bootstrap Pills Not Working As Expected

I pre-apologise if I've done something stupid, i'm still learning.

So using AngularJS, in one of my views i've used pills (not as a nav)

There are 3 pills, 2 of which seem to display the correct thing, but the active pill displays all 3 things together, which i need to fix. I've looked around on here and bootstraps website. I changed all the pill bits to tab, for example "tab-pane" and i also tried changing the href part to data-target, to no avail. Would anybody be able to point me in the right direction? Heres the view html. (Ive currently used a carousel for images, and will eventually use audio and video playlists but for now ive wrote plain text in the audio and video parts just to see where they end up.I also used directives just to keep it cleaner. The carousel works properly.)

<div class="tab-content">

  <!-- Album Pill -->

  <div id="albums" class="tab-pane fade in active">

    <image-carousel> </image-carousel>

  </div>

  <!-- Audio Pill -->

  <div id="audio" class="tab-pane fade in active">

    <audio-player> </audio-player>

  </div>

  <!-- Video Pill -->

  <div id="video" class="tab-pane fade in active">

    <video-player> </video-player>

  </div>


</div>

<!-- Tab List -->

<div class="container">
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="pill" href="#albums">ALBUMS</a></li>
    <li><a data-toggle="pill" href="#audio">AUDIO</a></li>
    <li><a data-toggle="pill" href="#video">VIDEO</a></li>
  </ul>
</div>

Here's what the active album pill ends up like

Pills Problem

Do i need to use some jquery to sort this? I read pills cant be nested, but i thought this meant a pill within a pill, as ive seen somebody use pills for this kind of thing in a view before.

Any help would be appreciated greatly!

Solution

  • It may be because you have set each tab-pane to active. Have you tried with this:

    <div id="albums" class="tab-pane fade in active">

  <image-carousel> </image-carousel>

</div>

<!-- Audio Pill -->

<div id="audio" class="tab-pane fade">

  <audio-player> </audio-player>

</div>

<!-- Video Pill -->

<div id="video" class="tab-pane fade">

  <video-player> </video-player>

</div>