Styling a Repeating Section (CSS)

This is a huge post, looking at the structure of a repeating section which is kind of weird. It’s a bit heavy and requires a fairly in-depth knowledge of CSS, so it’s okay to skip it (and the next post).

Repeating Sections on a Character Sheet

When you want to look at something on any webpage, the tried and true method is rightclicking an object and selecting Inspect (or Inspect Element on Firefox), as described earlier. Let’s say I do that with a repeating section I created earlier. I inspect an element within the section, and see this arcane image. There’s a fieldset at the top…

If you examine the fieldset at the top of the image, you can see the elements created by the sheet author to make the repeating section.

But wait, the selected item is a span that is not inside fieldset, but in a div.repitem below it. What is going on here?

What is the Fieldset Item? What is repcontrol, etc?

As described in the last post, a fieldset is best understood as a set of instructions. It says, “when creating a new row of repeating section, put these items inside it.”

The repeating section itself is a div with repcontainer class and a data-grouname equal to the repeating section name (here repeating_example). (We’ll come back to data-groupname shortly).

Each row of the repeating section is placed inside a div with a class repitem.

Below the repcontainer div, is another div with class repcontrol, with the same data-groupname. Inside repcontrol are the buttons for edit and add which appear at the bottom of each repeating section (though that can be changed).

Here’s that same repeating section, with 3 rows, and Add / Modify buttons (which have had some styling applied).

If you look closely, there’s also an itemcontrol – we’ll cover that in the next post, at the same time as repcontrol.

So now we know how a repeating section is constructed. What can we do with that information?

Using The Repeating Section Structure

Basic Inheritance (repcontainer and repitem)

You can control the appearance of all repeating sections using repcontainer and repitem. Let’s say you want all text in all repeating sections to be red:

.repitem {
   color:red;
}Code language: CSS (css)

Notice that the text inside the inputboxes is not red. We’d have to get more specific for that.

.repcontainer affects the entire repeating section, and .repitem affects individual rows. Observe the the difference between these two bits of code:

.repitem {
   border: 1pt solid red;
}Code language: CSS (css)

<code>.repcontainer {
   border: 1pt solid red;</code>}Code language: CSS (css)

So pick the correct one for your needs, knowing what you’ll be affecting.

(Note: if using legacy mode, don’t prepend this with sheet-. If you don’t understand that sentence, it’s fine – when making sheets today, you shoould never be using legacy mode. It’s outdated.).

data-groupname

repcontainer and repitem are indiscriminate and affect all repeating sections. When you want to target specific repeating sections, you need data-groupname.

You can use [data-groupname] in a similar fashion to .repcontainer, to affect all repeating sections. But it also affects the buttons at the bottom of each section, which might not be desired.

[data-groupname] {
    border: 1pt solid red;
}Code language: CSS (css)

Where this shines though is the ability to target specific elements of specific repeating sections.

[data-groupname="repeating_example"] .repitem {
    border: 1pt solid red;
}Code language: CSS (css)

Here just the repitems (rows) inside the repeating_example repeating section are affected. The buttons under the repeating section are not affected.

I’ve used a fairly impractical style here, so you can see it. But you can do all sorts of things. Where it gets really clever is when you change the layout of the repeating section itself.

Arranging Rows Horizontally

In HTML and CSS there is usually more than one way to do what you want. There are at least three ways to change the layout of a repeating section in this way. All use the display property.

The example on the CSS Wizardry guide of the Roll20 wiki uses display:inline-block, something like this.

[data-groupname="repeating_example"] .repitem {
    display:inline-block;
    color:red;
}Code language: CSS (css)

The CSS Wizardry page suggests slightly different code than shown here. It uses the > character – that means .repitems that are direct children of the .repcontainer are affected. But Roll20 doesnt allow nested fieldsets, so the only repitems under repcontainer will always be directlly below it. Thus, we don’t need the > character right now.

That said, Roll20 may one day allow nested fieldsets. Assuming they are built the same way, > might very well be needed. So there’s no harm in including it now to future proof your code.

You can also use display:grid to change the layout. Remember that with grid, it assumes you are working on child elements so we don’t need to specific .repitem – they are always child items of .repcontainer.

[data-groupname="repeating_example"] {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5px;
    color:red;
}Code language: CSS (css)

[data-groupname="repeating_example"] .repitem {
    border: 1pt solid red;
    margin-bottom: 5px;
}Code language: CSS (css)

The code above (both bit) produces the image below. I’ll draw attention to a few things.

Since this is a CSS Grid, which always works on child items, we don’t need to explicitly list the repitem in the first declaration block. By choosing a repeat(3), it places exactly 3 repitems in that space, and anything inside thoose items might go onto a second line. If there were four rows, the 4th row would cross over into a new line since this grid assumes 3 columns.

The second declaration block does expressly state the repitem because we are giving the repitem a border. The margin is just in case there are 4th or more rows, to make sure any extra rows don’t come too close. (Try it.)

The third method is using display:flex, which is a lot like grid. I’ll leave that as an exercise for the reader.

Styling the Add/Modify/Edit Buttons

The next post will cover changing the appearenace of the add/modify buttons – a very common desire.