League of Extraordinary FoundryVTT Developers•4y ago

V9 Tabs Issue

If you never figured this out, here's why this happened: A small change in Tabs during v9 causes some DOM configurations which previously worked to stop working. The tab elements (not the navigation for the tabs but the actual contents) must be direct children of the contentSelector element. Invalid (but worked previously):

          navSelector: '.tabs',
          contentSelector: 'form'

          navSelector: '.tabs',
          contentSelector: 'form'

<form>
  <div>
    <nav class="tabs"> </nav>
    <section class="tab" data-tab....>
    <section class="tab" data-tab....>
  </div>
  <div>footer</div>
</form>

<form>
  <div>
    <nav class="tabs"> </nav>
    <section class="tab" data-tab....>
    <section class="tab" data-tab....>
  </div>
  <div>footer</div>
</form>

Notice the <div> between <form> and <section>. In v9 a change (probably unintentional) made it so that this must be changed like so:

          navSelector: '.tabs',
          contentSelector: '.tabs-content'

          navSelector: '.tabs',
          contentSelector: '.tabs-content'

<form>
  <div class="tabs-content">
    <nav class="tabs"> </nav>
    <section class="tab" data-tab....>
    <section class="tab" data-tab....>
  </div>
  <div>footer</div>
</form>

<form>
  <div class="tabs-content">
    <nav class="tabs"> </nav>
    <section class="tab" data-tab....>
    <section class="tab" data-tab....>
  </div>
  <div>footer</div>
</form>

Mothership Post: https://discord.com/channels/170995199584108546/872553681449537666/889165279853158430

3 Replies

Re4XN•4y ago

@calego Hey man, sorry for the late reply! I have not been able to fix this yet unfortunately.

The tab elements (not the navigation for the tabs but the actual contents) must be direct children of the contentSelector element.

This appears to be the case in my layout already, yet I still have this issue:

<nav class="main-tabs tabz" data-group="primary">
    ...nav content...
</nav>

<section class="sheet-body">
    <div class="tab main" data-group="primary" data-tab="main">
        ...tab contents...
    </div>

    ...more tabs...
</section>

<nav class="main-tabs tabz" data-group="primary">
    ...nav content...
</nav>

<section class="sheet-body">
    <div class="tab main" data-group="primary" data-tab="main">
        ...tab contents...
    </div>

    ...more tabs...
</section>

And in my ActorSheet JS file, here's the tabs option:

{ navSelector: ".main-tabs", contentSelector: ".sheet-body", initial: "main" }

{ navSelector: ".main-tabs", contentSelector: ".sheet-body", initial: "main" }

As you can see, all of the tabs are direct children of the section, yet their content still appears invisible...

CalegoOP•4y ago

:/ hmmm I know there's an issue for this now, hopefully it'll be fixed as part of the v9 development phase and hopefully we won't need to work around this anymore.

Re4XN•4y ago

Do you have a link to it? Either way, thank you for the help! Found it: https://gitlab.com/foundrynet/foundryvtt/-/issues/5920

Gaming

Programming

V9 Tabs Issue