Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Grid and Rows are wonky on custom sheet

I can't seem to get the fields for the repeating_skills to span across the columns, it all stays in one column, while the headers do go across. <div class="sheet-editskills"> <h3>Combat Styles First</h3> <div class="sheet-block sheet-blue-color sheet-edit-combat-style" style="align-items: center"> <h3>Melee Combat Style</h3> <h4 class="sheet-center">Style Name</h4> <h4 class="sheet-center">Attribute</h4> <h4 class="sheet-center">Points</h4> <h4 class="sheet-center">Damage</h4> <h4 class="sheet-center">Dmg +</h4> <h4 class="sheet-center">Multiplier</h4> <h4 class="sheet-center">P+ </h4> <h4 class="sheet-center">Hit Bonus</h4> <h4 class="sheet-center">Def Bonus</h4> <input class="sheet-inputfield sheet-blue-color" type="text" name="attr_combat_style_1_name"> <select class="sheet-inputfield sheet-blue-color" type="text" style="width: auto; margin-top:8px" name="attr_combat_style_1_attribute"> <option value="0" disabled hidden selected></option> <option value="@{strength}" style="color:white;background:#000000;">Strength</option> <option value="@{dexterity}" style="color:white;background:#000000;">Dexterity</option> <option value="@{constitution}" style="color:white;background:#000000;">Constitution</option> <option value="@{intelligence}" style="color:white;background:#000000;">Intelligence</option> <option value="@{wisdom}" style="color:white;background:#000000;">Wisdom</option> <option value="@{charisma}" style="color:white;background:#000000;">Charisma</option> </select> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 72px;" name="attr_combat_style_1_points" value="0"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="text" style="width: 52px;" name="attr_combat_style_1_damage_dice"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_damage_bonus" value="floor(@{combat_style_1_points}/@{combat_style_1_damage_bonus_cost}) + @{combat_style_1_attribute}" disabled> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_damage_multiplier" value="floor(@{combat_style_1_points}/@{combat_style_1_damage_multiplier_cost})+1" disabled> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_p_plus" value="floor(@{combat_style_1_points}/@{combat_style_1_p_plus_cost})+1" disabled> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 75px;" name="attr_combat_style_1_hit_bonus" value="floor(@{combat_style_1_points}/@{combat_style_1_hit_bonus_cost})" disabled> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 75px;" name="attr_combat_style_1_def_bonus" value="floor(@{combat_style_1_points}/@{combat_style_1_def_bonus_cost})" disabled> <h4 title="This is how many levels it requires to increase this one property of the Combat Style" style="text-align:center; font-size: small;" disabled">Cost per Bonus</h4> <label disabled></label> <select class="sheet-skill-progression sheet-dropdown sheet-blue-color sheet-inputfield" type="text" name="attr_combat_style_1_progression" style="width: 5.5em;"> <option style="color:#278bce;background:#000000;">1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_damage_cost"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_damage_bonus_cost"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_damage_multiplier_cost"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 52px;" name="attr_combat_style_1_p_plus_cost"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 75px;" name="attr_combat_style_1_hit_bonus_cost"> <input class="sheet-inputfield-combat-style sheet-blue-color" type="number" style="width: 75px;" name="attr_combat_style_1_def_bonus_cost"> </div> <div style="align-items:center; padding-top:25px;"> <div class="sheet-block sheet-blue-color sheet-edit-skills"> <span disabled></span> <span disabled></span> <span disabled></span> <span disabled></span> <h3>Skills List</h3> <span class="sheet-center" style="grid-column:1;"> Name </span> <span class="sheet-center" style="grid-column:2;"> Attribute </span> <span class="sheet-center" style="grid-column:3;"> V.I. </span> <span class="sheet-center" style="grid-column:4;"> Gen </span> <span class="sheet-center" style="grid-column:5;"> Psi </span> <span class="sheet-center" style="grid-column:6;"> Misc </span> <span class="sheet-center" style="grid-column:7;"> Artifact </span> <span class="sheet-center" style="grid-column:8;"> Points </span> <span class="sheet-center" style="grid-column:9;"> Progr. </span> <span disabled></span> <fieldset class="repeating_skills"> <span><input class="sheet-inputfield sheet-blue-color" type="text" name="attr_skillname" value="" ></span> <span><select class="sheet-inputfield sheet-dropdown sheet-blue-color" name="attr_skillattribute" style="width:52px"> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_strength">STR</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_dexterity">DEX</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_constitution">CON</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_intelligence">INT</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_wisdom">WIS</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_charisma">CHA</option> </select></span> <span><input class="sheet-inputfield sheet-dropdown sheet-blue-color" type="number" name="attr_skillvibonus" value="0" style="width:52px"></span> <span><input class="sheet-inputfield sheet-dropdown sheet-blue-color" type="number" name="attr_skillgeneticbonus" value="0" style="width:52px"></span> <span><select class="sheet-inputfield sheet-dropdown sheet-blue-color" name="attr_skillpsibonus"> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_body_discipline">Body Disc</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_causation">Causation</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_clairvoyance">Clairvoyance</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_deflection">Deflection</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_domination">Domination</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_energy_communion">Energy</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_molecular_alteration">Molecular</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_pyrokinesis">Pyro</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_subatomic_alteration">Subatomic</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_telekinesis">Telekinesis</option> <option class="sheet-dropdown sheet-blue-color" style="background-color:#000005;" value="attr_psi_anti_psionics">Anti Psi</option> </select></span> <span><input class="sheet-inputfield sheet-dropdown sheet-blue-color" type="number" name="attr_skillmiscbonus" value="0" style="width:52px"></span> <span><input class="sheet-inputfield sheet-dropdown sheet-blue-color" type="number" name="attr_skillartifactbonus" value="0" style="width:52px"></span> <span><input class="sheet-inputfield sheet-dropdown sheet-blue-color" type="number" name="attr_skillpoints" value="0" style="width:52px"></span> <span><select class="skill-progression sheet-dorpdown sheet-blue-color sheet-inputfield" type="text" name="attr_skillprogression" style="width: 75px;"> <option style="color:#278bce;background:#000000;">1,2,3...</option> <option style="color:#278bce;background:#000000;">4,5,6,7</option> <option style="color:#278bce;background:#000000;">3,4,5,6</option> <option style="color:#278bce;background:#000000;">2,3,4,5</option> <option style="color:#278bce;background:#000000;">1,2,3,4</option> <option style="color:#278bce;background:#000000;">3,3,3,3</option> <option style="color:#278bce;background:#000000;">5,5,5,5</option> </select></span> </fieldset> </div> </div> * START OF EDIT SKILLS & COMBAT PAGE */ . charsheet . sheet-edit-skills-grid-section {   display : grid ;   grid-gap : 5px ;     grid-template-columns : 100% ;   grid-template-rows : auto auto ;   grid-template-areas :   " edit-combat-style "   " edit-skills " } . charsheet div . sheet-edit-combat-style {   grid-area : edit-combat-style ;   grid-template-columns : repeat ( 9 , auto );   grid-template-rows : auto ;       grid-auto-rows : 28px ;       grid-gap : 10px ;       align : center ; } . charsheet div . sheet-edit-combat-style h3 {   grid-column : 1 / -1 ;       text-align : center ;   grid-row : 1 ;     } . charsheet div . sheet-edit-combat-style h4 {       color : # 278bce ;     } . charsheet div . sheet-edit-combat-feats {   grid-column-start : 1 / 3 ; } . charsheet div . sheet-edit-skills {   grid-area : edit-skills ;   grid-template-columns : 125px 52px 52px 52px 100px 52px 52px 52px 75px 10px ;   grid-template-rows : 28px 1fr 1fr ;       grid-auto-rows : 28px ;       grid-gap : 10px ;       align : center ; } . charsheet div . sheet-edit-skills h3 {   grid-column : 5 / -5 ;       text-align : center ;   grid-row : 1 ;     } . charsheet div . sheet-edit-skills h4 {   color : # 278bce ;     } /* END OF EDIT SKILLS & COMBAT PAGE */
1659228980

Edited 1659229086
vÍnce
Pro
Sheet Author
Make sure you wrap your repeating skill attributes inside a div using sheet-edit-skills, otherwise they are not getting the same grid formatting as your headers. also, is the first line a typo? <div class="sheet-editskills"> should that also be <div class="sheet-edit-skills">
1659231035

Edited 1659240636
vÍnce said: Make sure you wrap your repeating skill attributes inside a div using sheet-edit-skills, otherwise they are not getting the same grid formatting as your headers. also, is the first line a typo? <div class="sheet-editskills"> should that also be <div class="sheet-edit-skills"> Thanks! I'll try that And yes, typo!
1659240672

Edited 1659244859
Okay, I was wrong.  That isn't a typo. Sheet-editskills is the reference for the name of the tab. sheet-edit-skills is the div layout