nested pivot

[illesma]

Hi!

Bootmetro is really fascinating, thank you for your amazing work. I just had a problem when I wanted to use the pivot element. I dont know if it is the right place to ask, please direct me somewhere else if not.. So:

I wanted to create nested (or embedded?) pivot, so like one of the "pivot-items" is not a simple paragraph as seen in the example file "pivot.html" in the projects root directory, but an other "pivot slide" that has "pivot-headers" and "pivot-items" as well:

<div id="pivot" class="pivot slide">
    <div id="pivot-header" class="pivot-headers">
        <a href="#pivot" data-pivot-index="0" class="active">Item 1</a>
        <a href="#pivot" data-pivot-index="1">Item 2</a>
    </div>
    <div id="pivot-items" class="pivot-items">

        <div id="pivot-item-1" class="pivot-item active">
           <h3>Item 1</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
        </div>

        <div id="pivot-item-2" class="pivot-item">              
            <div id="subpivot" class="pivot slide">
                <div id="subpivot-header" class="pivot-headers">
                    <a href="#subpivot" data-pivot-index="10" class="active">SubItem 1</a>
                    <a href="#subpivot" data-pivot-index="11">SubItem 2</a>
                </div>
                <div id="subpivot-items" class="pivot-items">

                    <div id="subpivot-item-11" class="pivot-item active">
                        <h3>SubItem 1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                    </div>

                    <div id="subpivot-item-12" class="pivot-item">
                        <h3>SubItem 2</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                    </div>                  
                </div>
            </div>                    
        </div>                              
     </div>
</div>


<script type="text/javascript">
    $('#pivot').pivot();
    $('#subpivot').pivot();
</script>

Note, that I also added the needed line (if I am right) to the script tag.

The result of this is that I can see the nested pivot headers, but cant see the "active" pivot item regardless I click one of the headers or not. Also the headers slip apart when I click one of them.
Is it possible that I cant use a pivot slide as a pivot item? It looks like scripts/bootmetro-pivot.js cant find the id of the nested pivot. What am I doing wrong, is it not supported what I want to do?

Thank for your help!

[aozora]

Hi, which version are you using?

[illesma]

Hi!
I am using the version that can be downloaded right now from here, github (bootmetro-master.zip). In the readmi file I can read:

Latest Release: v1.0

[aozora]

I checked your code, it seems correct except for 1 detail: in the subpivot, change the data-pivot-index values to be 0 and 1, instead of 10 and 11;
also, I just committed a patch for the css and the bootmetro-pivot.js to support the nested scenario.
Just re-download the master zip file ;)

[illesma]

Simply cool. Thanks :)

[illesma]

Ok, one other little thing to note:
when the nested pivot is not the last element of the "super" pivot-items (e.g paste an additional item into the sample above) it can goes crazy after selecting this additional header item: the selected pivot remains regardless any further selection..

[aozora]

Just commited a fix, now it should work!