I've followed the example here and my code is below. When the checkbox in a repeating item is clicked, the textarea shows/hides as expected. However, (a) is overlaps the +Add and Modify controls on the repeating section, and/or (b) is buried under the z-order of subsequent repeating items in the same list. What I want is for the entire repeating list to "drop-down" underneath any particular show textarea so things are readable and the repeating list controls are still usable (see the D&D 5e character sheet for an example of what I want.) How do I do this? The HTML: <div class="sheet-abilities">
<div class="no-grid">
<h3>Skills:</h3>
<fieldset class="repeating_skills">
<div>
<label>Name: <input type="text" class="skill-name" value="[empty slot]" name="attr_skill_name"/></label>
<label>Rank:</label> <input type="number" value="1" name="attr_skill_rank"/>
<label>Throw:</label> <input type="number" value="11" name="attr_skill_throw"/>
<button type="roll" value="/roll 1d20>@{skill_throw}" name="roll_skill_throw"></button>
<input type="checkbox" class="sheet-toggle-show" />
<div class="sheet-body"><textarea class="sheet-body" name="attr_skill_description"></textarea></div>
</div>
</fieldset>
</div>
</div> The CSS: .sheet-columns {
display: flex;
justify-content: space-between;
width: 400px;
}
.sheet-columns > * {
flex: 1;
}
input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
input.sheet-toggle-hide:checked ~ div.sheet-body {
display: none;
} (P.S. Any way to do the CSS without flex? I'm using grid for layout. Does it really matter if it works?)
