I may be having a brain durp, but stuck on something seemingly relatively simple.
I'm trying to create a 3-column layout for an alternate view of a skill table. One that hides a lot of the math and busy-ness. I can do it fine with static div fields, but once I introduce fieldsets it starts getting tricky.
I'm trying to get it to look like this (crude photoshop). But probably with hidden +add and modify buttons. They're included to give you a sense that the gray fields are repeating input fields.
But right now it looks like this.
I'm not sure how to include the repeating input field underneath it's relevant parent skill group. It worked fine when each repeating row had itself a full row.
I tried using grid some, but thinking maybe flex would be a better approach.
Here's some code samples. Here, I'm trying to get the "profession" repeating inputs to show up under the profession chunk.
<!-- KNOWLEDGE row, start of skills -->
<div class="adventuringskillsfillrepeating"> <!-- class is a misnomer leftover from before -->
<span class="skillnamefieldprimary" name="attr_knowledge">Knowledge</span>
<input type="text" class="skilltotalfield" name="attr_knowledgeskilltotal" value="">
<span class="skillrollbutton">
<button class="sheet-d6-dice" type="roll" value=
'&{template:dodas} {{name=@{character_name} Knowledge}} {{roll +@{knowledgeskilltotal} = =[[2d6 + @{knowledgeskilltotal}]]}}'
name="roll_skilltotalcolumn"></button> </span>
<span></span>
<span class="skillnamefieldprimary" name="attr_profession">Profession (Non-Adventuring)</span>
<input type="text" class="skilltotalfield" name="attr_professionskilltotal" value="">
<span class="skillrollbutton">
<button class="sheet-d6-dice" type="roll" value=
'&{template:dodas} {{name=@{character_name} Profession }} {{roll +@{professionskilltotal} = =[[2d6 + @{professionskilltotal}]]}}'
name="roll_skilltotalcolumn"></button> </span>
<span></span>
<span class="skillnamefieldprimary" name="attr_strengthskills">Strength Skills</span>
<input type="text" class="skilltotalfield" name="attr_strengthskillsskilltotal" value="">
<span class="skillrollbutton">
<button class="sheet-d6-dice" type="roll" value=
'&{template:dodas} {{name=@{character_name} Strength Skills }} {{roll +@{strengthskillsskilltotal} = =[[2d6 + @{strengthskillsskilltotal}]]}}'
name="roll_skilltotalcolumn"></button> </span>
</div>
<!-- Knowledge +add Repeating inputs -->
<fieldset class="repeating_knowledgespec">
<div class="adventuringskillsfillrepeatingsecondary">
<input type="text" class="skillnamefield" name="attr_skillsandabilities" value="">
<input type="text" class="skilltotalfield" name="attr_skilltotal" value="">
<span class="skillrollbutton">
<button class="sheet-d6-dice" type="roll" value=
'&{template:dodas} {{name=@{character_name} @{skillsandabilities} }} {{roll +@{skilltotal} = =[[2d6 + @{skilltotal}]]}}'
name="roll_skilltotalcolumn"></button> </span>
</div>
</fieldset>
<fieldset class="repeating_professionspec">
<div class="adventuringskillsfillrepeatingsecondary">
<input type="text" class="skillnamefield" name="attr_skillsandabilities" value="">
<input type="text" class="skilltotalfield" name="attr_skilltotal" value="">
<span class="skillrollbutton">
<button class="sheet-d6-dice" type="roll" value=
'&{template:dodas} {{name=@{character_name} @{skillsandabilities} }} {{roll +@{skilltotal} = =[[2d6 + @{skilltotal}]]}}'
name="roll_skilltotalcolumn"></button> </span>
</div>
</fieldset> And some of the CSS
div.adventuringskillsfillrepeating,
div.adventuringskillsfillrepeating input[type="text"], div.adventuringskillsfillrepeating input[type="number"] {
display: grid;
grid-template-columns: 150pt 26pt 20pt 9pt 150pt 26pt 20pt 9pt 150pt 26pt 20pt 9pt;
font-family: 'Verdana';
font-weight: 100;
height: 12.8pt;
font-size: 7.0pt;
width: 100%;
color: black;
}
div.adventuringskillsfillrepeatingsecondary,
div.adventuringskillsfillrepeatingsecondary input[type="text"], div.adventuringskillsfillrepeatingsecondary input[type="number"] {
display: grid;
grid-template-columns: 144pt 32pt 20pt 9pt 144pt 32pt 20pt 9pt 144pt 32pt 20pt 9pt;
font-family: 'Verdana';
font-weight: 100;
height: 12.8pt;
font-size: 7.0pt;
width: 100%;
color: black;
}
Maybe there's a simple solution. The div being inside the repeating input field doesn't seem to help. Perhaps if I styled the repeating input directly, as mentioned here? https://wiki.roll20.net/Character_Sheet_Development/Repeating_Section
I was originally thinking some kind of flexbox layout might be best. Where it's a column things with a max height, that spills over into a second column and a third column after awhile?
I feel I'm close to a solution but not sure I'm in the right ballpark. Thanks for any help!
