Numbering dynamic elements
Sometimes it may be necessary or useful to add ordinal numbers to number dynamic elements. This can be achieved by using CSS.
For the following example, create a new form and add a form element of type selection to the form. Let its name be sel1.
Numering dynamic elements purely with CSS
Required Javascript
Open the script tab and activate dynamic mode for the element sel1 by using the function dynamic().
$('[name="tf1"]').dynamic()
Required CSS
Open the CSS tab and enter the following CSS. Numbering is made possible by using the CSS counter-increment and counter-reset properties. Each dynamic element is put in a DIV with the class dynamic row by Xima® Formcycle.
[xn="tf1"] {
counter-reset: tf1row;
}
[xn="tf1"] > .dynamic-row > label:before {
counter-increment: tf1row;
content: "Überschrift für Zeile " counter(tf1row);
color: red;
}
[xn="tf1"] > .dynamic-row > label > p:before {
content: "Text vor der Zeile " counter(tf1row) ". ";
color: blue;
}
.dynamic-row {
margin-top: 1em;
margin-bottom: 1em;
}
counter-reset: tf1row;
}
[xn="tf1"] > .dynamic-row > label:before {
counter-increment: tf1row;
content: "Überschrift für Zeile " counter(tf1row);
color: red;
}
[xn="tf1"] > .dynamic-row > label > p:before {
content: "Text vor der Zeile " counter(tf1row) ". ";
color: blue;
}
.dynamic-row {
margin-top: 1em;
margin-bottom: 1em;
}