League of Extraordinary FoundryVTT Developers•2y ago

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:

4 Replies

Leo The League Lion•2y ago

@acekokuren gave LeaguePoints™ to @mxzf (#327 • 1)

AceKokuren 🌈[UTC+1]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•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 🌈[UTC+1]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

Gaming

Programming

Nested Navbar on Character Sheet