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

Variable-width repeating section rows

1497366289
Jakob
Sheet Author
API Scripter
Is there some CSS magic I can use to have rows of a repeating section take up either 50% or 100% of the width of the parent container, based upon an attribute in that row? I can't seem to figure out how to do that.
1497374053

Edited 1497374083
Lithl
Pro
Sheet Author
API Scripter
Based on an attribute of that row? No, at least not directly. Manipulating the width of a repeating section item requires modifying the properties of the .repitem element, which is the parent of the elements in the row. Instead of manipulting the repitem's width, however, you could make it an inline element (eg, display: inline-block), and manipulate the total width of its children. Something along these lines (untested): <fieldset class="repeating_example"> <input type="checkbox" name="attr_shrink" class="sheet-shrink"> <div class="sheet-repitem-body"> Lorem ipsum dolor sit amet </div> </fieldset> .repitem, .sheet-repitem-body { display: inline-block; } .sheet-repitem-body { width: calc(100% - 15px); } .sheet-shrink:checked + .sheet-repitem-body { width: calc(50% - 15px); }
1497377132
Jakob
Sheet Author
API Scripter
That's precisely what I was looking for!* *Well, almost. I had tried a similar setup with inline-block for the repitem div before (which does not work), but your suggestion made me try inline instead, which ended up working. Thanks!
1497427680
Jakob
Sheet Author
API Scripter
Meh, celebrated too early. display:inline messes up the itemcontrols in editmode :(.
1497473298
Kryx
Pro
Sheet Author
API Scripter
<div class="sheet-section-name"> <fieldset class="repeating_example"> <input type="checkbox" name="attr_shrink" class="sheet-shrink"> <div class="sheet-repitem-body"> content </div> </fieldset> </div> .sheet-section-name .repcontainer { display: flex; flex-wrap: wrap; } .sheet-shrink:not(:checked) + .sheet-repitem-body { width: 100%; } .sheet-shrink:checked + .sheet-repitem-body { width: 50%; } That should do it.