LOE
League of Extraordinary FoundryVTT Developers•2y ago
AceKokuren 🌈[GMT]

Nested Navbar on Character Sheet

Thanks to @mxzf I was able to get a nested navbar to show, but none of the data is being displayed that should be. I am not sure where I am tripping up. This is what the sheet looks:
No description
4 Replies
Leo The League Lion
Leo The League Lion•2y ago
@acekokuren gave vote LeaguePoints™ to @mxzf (#327 • 1)
AceKokuren 🌈[GMT]
AceKokuren 🌈[GMT]OP•2y ago
The html for the basic tab is: 
<ol class="items-list">
    <li>Hello</li>
    <li>d</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
<ol class="items-list">
    <li>Hello</li>
    <li>d</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>
I have this set up in the nested navbar: 
<nav class="nested-sheet-tabs tabs" data-group="secondary">
    <a class="item" data-tab="basic">{{localize 'OUTBREAK.Skills.Basic.value'}}</a>
    <a class="item" data-tab="trained">{{localize 'OUTBREAK.Skills.Trained.value'}}</a>
    <a class="item" data-tab="expert">{{localize 'OUTBREAK.Skills.Expert.value'}}</a>
</nav>

<div class="skills-list tab" data-tab="basic" data-group="secondary">
    {{> "systems/outbreak-undead/templates/actor/parts/skills/basic.html"}}
</div>
<nav class="nested-sheet-tabs tabs" data-group="secondary">
    <a class="item" data-tab="basic">{{localize 'OUTBREAK.Skills.Basic.value'}}</a>
    <a class="item" data-tab="trained">{{localize 'OUTBREAK.Skills.Trained.value'}}</a>
    <a class="item" data-tab="expert">{{localize 'OUTBREAK.Skills.Expert.value'}}</a>
</nav>

<div class="skills-list tab" data-tab="basic" data-group="secondary">
    {{> "systems/outbreak-undead/templates/actor/parts/skills/basic.html"}}
</div>
And the default options inside character-sheet.js: 
static get defaultOptions() {
        return mergeObject(super.defaultOptions, {
            classes: ["outbreak", "sheet", "actor"],
            template: "systems/outbreak-undead/templates/actor/character-sheet.html",
            width: 600,
            height: 600,
            tabs: [
                {
                    navSelector: ".sheet-tabs",
                    contentSelector: ".sheet-body",
                    initial: "skills"
                },
                {
                    navSelector: ".nested-sheet-tabs",
                    contentSelector: ".skills-list",
                    initial: "basic"
                }
            ]
        });
    }
static get defaultOptions() {
        return mergeObject(super.defaultOptions, {
            classes: ["outbreak", "sheet", "actor"],
            template: "systems/outbreak-undead/templates/actor/character-sheet.html",
            width: 600,
            height: 600,
            tabs: [
                {
                    navSelector: ".sheet-tabs",
                    contentSelector: ".sheet-body",
                    initial: "skills"
                },
                {
                    navSelector: ".nested-sheet-tabs",
                    contentSelector: ".skills-list",
                    initial: "basic"
                }
            ]
        });
    }
mxzf
mxzf•2y ago
I think you need to wrap the tab divs in a section, like <section class="skills-list">, so that it knows what HTML block to replace with the content
AceKokuren 🌈[GMT]
AceKokuren 🌈[GMT]OP•2y ago
Hmm, no change. I am not sure if something is mistyped or I'm missing something fundamental I found it I realised what you meant now I am an idiot I put it in every other place except where it was needed

Did you find this page helpful?