LOE
League of Extraordinary FoundryVTT DevelopersCalego

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
R
Re4XN•961d 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...
C
Calego•961d 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.
R
Re4XN•961d ago
Do you have a link to it? Either way, thank you for the help! Found it: https://gitlab.com/foundrynet/foundryvtt/-/issues/5920
Want results from more Discord servers?
Add your server
More Posts
Deck Creation MacroI created a macro to fill out a 52-card deck, you set the ID of the deck and the base URL of the foldevmode-issues@arcanist figured out, the flex layout elements have `pointer-events: none`, so anything injected wifunction vs methodAnyone know of a good guide that explains the difference between a function and a method? I don't reActive Effect HelpAnd it should be the actual ActiveEffect document for the effect, not just the id. I don't have theTOL JEs@badgerwerks I haven't had a chance to poke around in TOB/BoL yet, but I wanted to ask how you did tCI 2 minute windowAlright, I've got a Gitlab CI pipeline I'm reasonably pleased with as a result of yesterday's effortGitLab CI PipelinesToday's project is Gitlab CI. Wow me with your pipelines if you got em.Storybook Shennanegins@wyrmisis I have a headcannon for you, one who also uses Storybook. _What if_ we could load foundryjsxDammit I want this...react librarySo far I've seen Vue 2, Vue 3, Alpine, and Svelte pulled into Foundry. No one has yet been crazy enoweb componentsA comment @n1xx1 made over in #development-basics (https://discord.com/channels/732325252788387980/7UI element JS Classeshttps://discord.com/channels/732325252788387980/734922093967310910/882979923483037696 @wyrmisis > I