Numbering repeatable elements using CSS

Display a consecutive number for dynamic elements

Sometimes it makes sense to display a consecutive number for dynamic elements. This example form shows, how you can write the numbering on the label of dynamic form elements using CSS. There is also a detailed explanation in the FORMCYCLE help.

Repeating container (with numbering)

/* Select the container of repeatable elements

   and reset the counter here */

.CXTextField[data-xm-dynamic] {
    counter-reset: counter;
}
 

/* For each repeated element, increment the counter by one */

.dynamic-row {

    counter-increment: counter;

}

 

/* Select the label text of each for element */

.dynamic-row label > p::before, 

.dynamic-row legend::before {

    /* Add the number in front of the label */

    /*  Example for using letters instead: 

        content: counter(counter, lower-alpha); */

    content: counter(counter) ". ";

    /* And make it blue */

    color: blue;

}

You can copy and paste this CSS code block to insert the numbering for each dynamic element.

No repeating container (without numbering)