Repeating Fields Help

Hello, I have been banging my head against the wall... as usual, of course. I have an inventory page. There are different Categories, each in their own div. I want each one to be a repeating field. Armors Weapons Inventory (misc stuff) (item, description, count, weight, size, tech level) Contacts (Name and "Data") When I try to do the repeating fields, the defined grids get ignored... Grid formatting goes haywire. I was wondering if someone could put in the repeating field sections (I'll put in the inputs, of course), so that it will honor the CSS grid layout. CSS /* START OF INVENTORY EDIT PAGE */ . charsheet . edit-inventory-grid-section {   display : grid ;   grid-gap : 5px ;     grid-template-columns : 100% ;   grid-template-rows : auto auto auto auto ;   grid-template-areas :     " edit-armor "   " edit-weapons "   " edit-inventory "   " edit-contacts " } div . edit-armor-entries {   grid-area : edit-armor ;   display : grid ;   grid-template-columns : 75px 45px 45px 75px 75px 45px 45px 45px 45px 45px 45px 45px 45px 45px ;   grid-template-rows : auto ;       grid-auto-rows : 28px ;       grid-gap : 5px ;       column-gap : 5px ;   column-gap : 5px ;     text-align : center ; } div . edit-weapon-entries {   grid-area : edit-weapons ;   display : grid ;   grid-template-columns : 75px 45px 45px 75px 75px 45px 45px 45px 45px 45px 45px 45px 45px 45px ;   grid-template-rows : auto ;       grid-auto-rows : 28px ;       grid-gap : 5px ;       column-gap : 5px ;   column-gap : 5px ;     text-align : center ; } div . edit-contacts h5 {   grid-column : 1 / -1 ;   grid-row : 1 ;   text-align : center ; } div . edit-inventory-entries {   grid-area : edit-inventory ;   display : display ;   grid-template-columns : 125px 400px 52px 75px 75px 52px ;   grid-template-rows : auto ;       grid-auto-rows : 28px ;       grid-gap : 5px ;       column-gap : 5px ;   column-gap : 5px ;     text-align : center ; } div . edit-inventory-contact-entries {   grid-area : edit-inventory ;   grid-template-columns : 125px 400px ;   grid-template-rows : auto ;           grid-gap : 10px ;       column-gap : normal ;     text-align : center ; } /* END OF INVENTORY EDIT PAGE */ HTML for the page: <div class="sheet-inventory">     <div class="sheet-block sheet-inventory-grid-section">         <div> <!-- MONEY AT TOP --> <!--  NO REPEATING FIELDS HERE FOR MONEY --> <!-- Galactic Credits -->             <input class="sheet-inputfield sheet-purple-color" type="hidden" name="attr_galactic_credits_header" value="Galactic Credits">                         <span class="sheet-purple-color" name="attr_galactic_credits_header" value="attr_galactic_credits_header" style="padding-left:7em;"></span>             <input class="sheet-inputfield sheet-purple-color" style="width:10em;" type="number" title="Galactic Credits" name="attr_galactic_credits" value="0">                     <!-- Gold Credits -->             <input class="sheet-inputfield sheet-gold-color" type="hidden" name="attr_gold_credits_header" value="Gold Credits">                         <span class="sheet-gold-color" name="attr_gold_credits_header" value="attr_gold_credits_header"></span>             <input class="sheet-inputfield sheet-gold-color" style="width:10em;" type="number" title="Gold Credits" name="attr_galactic_credits" value="0">             <!-- Iron Credits -->             <input class="sheet-inputfield sheet-silver-color" type="hidden" name="attr_iron_credits_header" value="Iron Credits">                         <span class="sheet-silver-color" name="attr_iron_credits_header" value="attr_iron_credits_header"></span>             <input class="sheet-inputfield sheet-silver-color" style="width:10em;" type="number" title="Iron Credits" name="attr_iron_credits" value="0">         </div>             <span class="sheet-center edit-inventory-grid-section sheet-gold-color" style="padding-top: 10px; text-align: center;">INVENTORY</span>         <!-- REPEATING FIELDS FOR THE FOLLOWING MAJOR DICS -->             <div class="sheet-block edit-armor-entries sheet-center sheet-blue-color">                                 <h4 class="sheet-center" style="grid-column: 1 / 15; color:#278bce; font-variant-caps: all-small-caps; font-size:large;"> Armor </h4>                 <span>Name</span>                 <span>T.L.</span>                 <span>Def</span>                 <span>HP</span>                 <span>Max HP</span>                 <span>Mult</span>                 <span>P+</span>                 <span>Shrug</span>                                 <span>Regen</span>                 <span>CDS</span>                 <span>STR</span>                 <span>DEX</span>                 <span>CON</span>                 <span>Mov</span>                 <!-- DISPLAY ROW -->                 <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_name" value="Armor Name" style="width: 75px;" title="A name for your armor."/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_tech_level" value="3" style="width: 45px;" title="The sum of all property Tech Levels."/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_def" value="floor((@{armor_tech_level}/@{armor_ranged_def_cost}) + @{dexterity} + @{armor_dexterity})" title="Armor's Defense Score bonus." style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_health" value="N/A" title="Armor Current HP" style="width: 75px;" disabled/>                 <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_health_max" value="floor(@{armor_strength}*@{armor_constitution})*@{armor_health_mult}" style="width: 75px;" title="Armor Max HP" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_health_mult" value="floor(@{armor_tech_level}/@{armor_health_mult_cost}+1)" title="Armor Multiplier when rolling HP Dice." style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_p_plus" value="floor(@{armor_tech_level}/@{armor_p_plus_cost})" title="Armor Penetration Plus" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_shrug" value="floor(@{armor_tech_level}/@{armor_shrug_cost})" title="Armor Damage Reduction"  style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_regen" value="floor(@{armor_tech_level}/@{armor_regen_cost})" title="Armor Regeneration per turn" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_cds" value="floor(@{armor_tech_level}/@{armor_cds_cost})" title="Armor Computer Defense Score" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_strength" value="floor(@{armor_tech_level}/@{armor_strength_cost})" title="Armor Strength" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_dexterity" value="floor(@{armor_tech_level}/@{armor_dexterity_cost})" title="Armor Dexterity" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_constitution" value="floor(@{armor_tech_level}/@{armor_constitution_cost})" title="Armor Constitution" style="width: 45px;" disabled/>                     <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_movement" value="floor(3+(@{armor_tech_level}/@{armor_movement_cost}/5))" title="Armor Movement measured in squares, or 5 foot units." style="width: 45px;" disabled/>                                                   <!-- INPUT CALCULATIONS ROW --- HIDDEN -->                                         <!-- COST PER BONUS ROW -->                                 <span class="sheet-grey-color sheet-center" style="font-size: smaller;" title="Defaults in place">Cost::Bonus</span>                 <label disabled></label>                 <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_ranged_def_cost" value="8" title="Armor Defense Score cost in tech levels"/>                                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_max_cost" value="2" title="Armor Current Health Max"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_mult_cost" value="16" title="Armor Penetration Plus cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_max" value="2" title="Armor Multiplier when rolling HP Dice." />                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_p_plus_cost" value="4" title="Armor Penetration Plus cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_shrug_cost" value="2" title="Armor Damage Reduction cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_regen_cost" value="12" title="Armor Regeneration per turn cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_cds_cost" value="2" title="Armor Computer Defense Score cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_strength_cost" value="2" title="Armor Strength cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_dexterity_cost" value="6" title="Armor Dexterity cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_constitution_cost" value="4" title="Armor Constitution cost in Tech Levels"/>                     <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_movement_cost" value="4" title="Armor Movement cost in Tech Levels"/>                 </div>         <!-- AND FOR THE NEXT 3 DIVS TOO -->             <div class="sheet-block edit-weapon-entries">             </div>             <div class="sheet-block edit-inventory-entries">                             </div>             <div class="sheet-block edit-contact-entries">                             </div>         </div>     </div> Thanks in advance!!!

That's an awful lot of redundant code for someone to parse to help you with the layout. Do you have a screenshot of how you want it to look? It doesn't need to have much content but a basic layout with a border around each section and something like: ________________________________ ________________________________ | Armor Section | | Weapon Section | | some kind of description area | | some kind of description area | | <repeating entries goes here> | | <repeating entries goes here> | |________________________________| |________________________________| ___________________________________________________________________ | Items Section | | some kind of description area | | <repeating entries goes here> | |___________________________________________________________________| And then just posting the actual relevant CSS instead of the whole lot for someone else to try to pick through - help other people to help you :)

This part of your HTML blocks contains 15 elements instead of 14 for the other 2 below. That might be a problem. <!-- REPEATING FIELDS FOR THE FOLLOWING MAJOR DICS -->             <div class="sheet-block edit-armor-entries sheet-center sheet-blue-color">                                 <h4 class="sheet-center" style="grid-column: 1 / 15; color:#278bce; font-variant-caps: all-small-caps; font-size:large;"> Armor </h4>                 <span>Name</span>                 <span>T.L.</span> ....                 <span>DEX</span>                 <span>CON</span>                 <span>Mov</span> Also I notice you use a lot of actual pixel values in grid-template-columns. You might want to use the "fr" unit instead, and use the "repeat" syntax when appropriate.

Also, there is nothing in your HTML that defines a repeating section. You must put the repeated items in a fieldset. And be aware that roll20 will hide the fieldset, create a corresponding repcontainer and create a new div in this container for each new row by copying the content of the fieldset. So if you really want repeating sections, you might consider this because your rows will never be part of an outer CSS grid. Inpect a repeating section in a existing sheet to observe what I explained and what happens when rows are added. This is also explained in the wiki.

Sorry about that! I copied and pasted too much!  I fixed it. Here is a pic of what I have going so far... The weapons box, the headers of each column are not lining up with the fields below it. Oosh said: That's an awful lot of redundant code for someone to parse to help you with the layout. Do you have a screenshot of how you want it to look? It doesn't need to have much content but a basic layout with a border around each section and something like: ________________________________ ________________________________ | Armor Section | | Weapon Section | | some kind of description area | | some kind of description area | | <repeating entries goes here> | | <repeating entries goes here> | |________________________________| |________________________________| ___________________________________________________________________ | Items Section | | some kind of description area | | <repeating entries goes here> | |___________________________________________________________________| And then just posting the actual relevant CSS instead of the whole lot for someone else to try to pick through - help other people to help you :)

I'll keep the CSS super simple, but I'd probably do it something like this: <div class="sheet-block edit-armor-entries sheet-center sheet-blue-color"> <!-- Stuff outside the grid --> <h4 class="sheet-center" style="grid-column: 1 / 15; color:#278bce; font-variant-caps: all-small-caps; font-size:large;"> Armor </h4> <!-- Header row --> <div class="repeating-grid-header armor"> <span>Name</span> <span>T.L.</span> <span>Def</span> <span>HP</span> <span>Max HP</span> <span>Mult</span> <span>P+</span> <span>Shrug</span> <span>Regen</span> <span>CDS</span> <span>STR</span> <span>DEX</span> <span>CON</span> <span>Mov</span> </div> <!-- Start repeating section --> <fieldset class="repeating_armor"> <!-- Display row --> <div class="repeating-grid-row armor input"> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_name" value="Armor Name" style="width: 75px;" title="A name for your armor."/> <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_tech_level" value="3" style="width: 45px;" title="The sum of all property Tech Levels."/> <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_def" value="floor((@{armor_tech_level}/@{armor_ranged_def_cost}) + @{dexterity} + @{armor_dexterity})" title="Armor's Defense Score bonus." style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_health" value="N/A" title="Armor Current HP" style="width: 75px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_armor_health_max" value="floor(@{armor_strength}*@{armor_constitution})*@{armor_health_mult}" style="width: 75px;" title="Armor Max HP" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_health_mult" value="floor(@{armor_tech_level}/@{armor_health_mult_cost}+1)" title="Armor Multiplier when rolling HP Dice." style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_p_plus" value="floor(@{armor_tech_level}/@{armor_p_plus_cost})" title="Armor Penetration Plus" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_shrug" value="floor(@{armor_tech_level}/@{armor_shrug_cost})" title="Armor Damage Reduction" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_regen" value="floor(@{armor_tech_level}/@{armor_regen_cost})" title="Armor Regeneration per turn" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_cds" value="floor(@{armor_tech_level}/@{armor_cds_cost})" title="Armor Computer Defense Score" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_strength" value="floor(@{armor_tech_level}/@{armor_strength_cost})" title="Armor Strength" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_dexterity" value="floor(@{armor_tech_level}/@{armor_dexterity_cost})" title="Armor Dexterity" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_constitution" value="floor(@{armor_tech_level}/@{armor_constitution_cost})" title="Armor Constitution" style="width: 45px;" disabled/> <input class="sheet-inputfield sheet-blue-color sheet-center" name=attr_armor_movement" value="floor(3+(@{armor_tech_level}/@{armor_movement_cost}/5))" title="Armor Movement measured in squares, or 5 foot units." style="width: 45px;" disabled/> </div> <!-- INPUT CALCULATIONS ROW --- HIDDEN --> <div class="repeating-grid-row armor hidden"> <!-- calculation stuff --> </div> <!-- COST PER BONUS ROW --> <div class="repeating-grid-row armor cost"> <span class="sheet-grey-color sheet-center" style="font-size: smaller;" title="Defaults in place">Cost::Bonus</span> <label disabled></label> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_ranged_def_cost" value="8" title="Armor Defense Score cost in tech levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_max_cost" value="2" title="Armor Current Health Max"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_mult_cost" value="16" title="Armor Penetration Plus cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_health_max" value="2" title="Armor Multiplier when rolling HP Dice." /> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_p_plus_cost" value="4" title="Armor Penetration Plus cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_shrug_cost" value="2" title="Armor Damage Reduction cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_regen_cost" value="12" title="Armor Regeneration per turn cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_cds_cost" value="2" title="Armor Computer Defense Score cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_strength_cost" value="2" title="Armor Strength cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_dexterity_cost" value="6" title="Armor Dexterity cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_constitution_cost" value="4" title="Armor Constitution cost in Tech Levels"/> <input class="sheet-inputfield sheet-silver-color sheet-center" type="number" name="attr_armor_movement_cost" value="4" title="Armor Movement cost in Tech Levels"/> </div> </fieldset> </div> The static header row with the column titles, and each part of the repeating section which forms a row all get wrapped in a <div>. These are what you target with your grid CSS. And the barebones CSS: /* Styles common to all header rows in the repeating sections */ .repeating-grid-header { display: grid; align-items: center; justify-items: center; } /* Styles common to all repeating rows */ .repeating-grid-row { display: grid; align-items: center; justify-items: center; } /* Specifics, like spacing, done per repeating section */ /* Include all sections in the same rule so it's easier to change column settings */ .repeating-grid-header.armor, .repeating-grid-row.armor { grid-template-columns: 75px 45px 45px 75px 75px 45px 45px 45px 45px 45px 45px 45px 45px 45px; column-gap: 5px; } /* And then any row-specific styles you need */ .repeating-grid-row.armor.input { } .repeating-grid-row.armor.hidden { display: none; } .repeating-grid-row.armor.cost { } As Dispatch pointed out, you might have the wrong number of elements in some rows. It looks like you have a blank entry in the "cost" row right after the cost::bonus label - I'd probably do them with a specific div, like <div class="blank-cell"></div>. That will allow you to define some CSS for your blank cells, so you can change the look later if you want to - they might look better as fake, disabled inputs, or they might look better as background color. I also wasn't 100% sure if the 'costs' row was supposed to be part of the repeating section or not. If it isn't, it's pretty much a footer.  So you just need to move the </fieldset> closing tag up above it, and potentially change the class name to make it clear it's the footer and not part of the actual row. This approach essentially breaks each row into its own, one-row grid. That means you can't easily mix elements between rows like you can with one big grid, but that's not likely to be something you want to ever do with a repeating section anyway.

That's super awesome!

Can I pick your brain for another topic??? On the psionics page, I can't get the buttons to work to display the various psionic divs, just how the page switches when the main buttons are clicked, I want a partial section of the page, the bottom part, to change what is displays depending on another set of buttons... The problem is, the buttons don't work at all. I have to manually change the value for the hidden input field. Here's the HTML  <div class="sheet-editpsionics">     <h3 style="grid-column: 1 / -1; text-align:center; padding-top: 10px;">PSIONICS EDIT PAGE</h3>     <!-- PAGE HEADER BELOW BUTTONS -->               <!-- Add your HTML HERE -->          <div class="sheet-edit-psionics-grid-section">                                   <div class="sheet-block edit-life-energy" style="text-align: center;">                                 <h3 style="grid-column: 1 / -1; padding-top: 5px;">LIFE CORD</h3>                 <span class="sheet-blue-color" >Life Energy</span class="sheet-blue-color" />                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Life Energy" type="number" name="attr_life_energy" value="attr_life_energy" style="width:5em;" />                 <span class="sheet-red-color">/</span>                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Maximum Life Energy" type="number" name="attr_life_energy_full" value="" style="width:5em;" />                 <input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>                 <span class="sheet-blue-color" >RE</span>                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Raw Energy Output" type="number" name="attr_raw_energy" value="floor(@{life_energy} / 100)" disabled />                                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Sphere of Influence" type="number" name="attr_sphere_of_influence" value="floor((@{life_energy} / 100)+3)" disabled />                 <span class="sheet-blue-color" >Sphere</span>                 <input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>                 <span class="sheet-blue-color" >Regen %</span class="sheet-blue-color" />                 <input class="sheet-inputfieldlc sheet-blue-color" title="Percentage your LC regenerates (of max)" type="number" name="attr_life_energy_regen_percent" value="10" />                                                                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Actual Life Energy per day" type="number" name="attr_life_energy_regenerated" value="(@{life_energy_full}/100)*(@{life_energy_regen_percent})" disabled />                 <span class="sheet-blue-color" >/day</span class="sheet-blue-color" />             </div>                                 <div class="edit-psionics-buttons">                           <input type="hidden" class="sheet-tabstoggle1" name="attr_sheetTab2"  value="body-discipline" />                                                       <button class="sheet-button-roll2" type="action" name="act_body-discipline" >Body Disc</button>                               <button class="sheet-button-roll2" type="action" name="act_causation" >Causation</button>                     <button class="sheet-button-roll2" type="action" name="act_clairvoyance" >Clairvoyance</button>                     <button class="sheet-button-roll2" type="action" name="act_deflection" >Deflection</button>                     <button class="sheet-button-roll2" type="action" name="act_domination" >Domination</button>                       <button class="sheet-button-roll2" type="action" name="act_energy-communion" >Energy</button>                                               <button class="sheet-button-roll2" type="action" name="act_molecular-alteration" >Molecular</button>                     <button class="sheet-button-roll2" type="action" name="act_pyrokinesis" >Pyrokinesis</button>                     <button class="sheet-button-roll2" type="action" name="act_subatomic-alteration" >Subatomic</button>                     <button class="sheet-button-roll2" type="action" name="act_telekinesis" >Telekinesis</button>                       <button class="sheet-button-roll2" type="action" name="act_anti-psionics" >Anti Psi</button>                                       <div class="sheet-psionics-buttons sheet-body-discipline sheet-block">                                                                 <h4 class="sheet-blue-color">Body Discipline Page???</h4>                         <h4 class="sheet-blue-color">Body Discipline Page???</h4>                                     </div>                   <div class="sheet-causation sheet-block">                                         <div class="edit-psionics">                         <h4 class="sheet-blue-color">Causation Page???</h4>                         <h4 class="sheet-blue-color">Causation Page???</h4>                                             </div>                 </div>                               </div>         </div> </div>       <!-- END OF Psi Edit SHEET --> <script type="text/worker">     /* This controls the button functions to switch PAGE tabs */         const buttonlist = ["character","equipped","editskills","inventory","editcharacter","editpsionics"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); /* This controls the button functions to switch Psionic tabs */     const buttonlist = ["body-discipline","causation","clairvoyance","energy-communion","molecular-alteration","pyrokinesis","subatomic-alteration","telekinesis","anti-psionics"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 psiTab: button             });         });     }); And the CSS. /*Configure the tab buttons*/ .charsheet .sheet-body-discipline, .charsheet .sheet-causation, .charsheet .sheet-clairvoyance, .charsheet .sheet-dominiation, .charsheet .sheet-energy-communion, .charsheet .sheet-molecular-alteration, .charsheet .sheet-pyrokinesis, .charsheet .sheet-subatomic-alteration, .charsheet .sheet-telekinesis, .charsheet .sheet-anti-psionics {     display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle1[value="body-discipline"] ~ div.sheet-body-discipline, .charsheet .sheet-tabstoggle1[value="causation"] ~ div.sheet-causation, .charsheet .sheet-tabstoggle1[value="clairvoyance"] ~ div.sheet-clairvoyance, .charsheet .sheet-tabstoggle1[value="deflection"] ~ div.sheet-deflection, .charsheet .sheet-tabstoggle1[value="domination"] ~ div.sheet-domination, .charsheet .sheet-tabstoggle1[value="energy-communion"] ~ div.sheet-energy-communion, .charsheet .sheet-tabstoggle1[value="molecular-alteration"] ~ div.sheet-molecular-alteration, .charsheet .sheet-tabstoggle1[value="pyrokinesis"] ~ div.sheet-pyrokinesis, .charsheet .sheet-tabstoggle1[value="subatomic-alteration"] ~ div.sheet-subatomic-alteration, .charsheet .sheet-tabstoggle1[value="telekinesis"] ~ div.sheet-telekinesis, .charsheet .sheet-tabstoggle1[value="anti-psionics"] ~ div.sheet-anti-psionics {     display: block; }

Also, with the above code in place, the main page buttons don't work either. Something is breaking somewhere, :(