Nummerierung wiederholbarer Elemente
Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Statt die Nummerierung im Html fest zu hinterlegen, können wir sie dynamisch durch Css hinzufügen.
Zuerst fügen wir im Xima® Formcycle-Designer ein Auswahlelement zum Formular hinzu. Dem Auswahlelement geben wir den Namen tfEmail.
Änderungen im Formular
Zuerst müssen wir das Formularelement wiederholbar schalten. Dazu setzen wir das Häkchen bei der Einstellung im Xima® Formcycle-Designer unter Grundeigenschaften.
Änderungen im CSS-Bereich
Im Css-Bereich können wir nun die Nummerierung vornehmen. Dies geschieht mit den CSS-Eigenschaften counter-reset sowie counter-increment. Im CSS kann es einen oder mehrere Zähler geben. Jeder Zähler hat einen Namen und einen aktuellen Zahlenwert. Und wann zählt ein Zähler hoch? Das funktioniert wie folgt:
- Der Anfangswert ist 0.
- Nun wird die HTML-Struktur des Formulars von oben nach unten durchgegangen.
- Wird auf ein Element mit der Css-Eigenschaft counter-reset getroffen, wird der Zähler auf den angegebenen Wert zurück gesetzt.
- Wird auf ein Element mit der Css-Eigenschaft counter-increment getroffen, wird der Zähler um eins erhöht.
Das können wir dazu nutzen, den Zähler bei jedem wiederholten Element zu erhöhen. Im Beschriftungstext des Eingabefeld ist es uns so möglich, mittels des Pseudo-Elements before und counter(...) den aktuellen Wert des Zählers einzufügen.
Bevor wir das Css schreiben, müssen wir noch zwei Sachen wissen. Jedes Formularelement befindet sich in einem Container (div) mit der Klasse xm-item-div. Dieser Container hat den Namen des Formularlements im Attribut xn. Zudem liegt jedes wiederholte Element nochmal in einem eigenen Container mit der Klasse dynamic-row.
/* Und den Zähler hier zurücksetzen */
.xm-item-div[data-xm-dynamic] {
counter-reset: counterWdh;
}
/** Für jedes wiederholte Element den Zähler um eins erhöhen */
.dynamic-row {
counter-increment: counterWdh;
}
/* Den Beschriftungstext der Formularelemente auswählen */
.dynamic-row label > p::before,
.dynamic-row legend::before {
/** Die Nummer vor dem Text hinzufügen */
content: counter(counterWdh) ". ";
/** Und zu Demozwecken blau einfärben */
color: blue;
}
Die Nummerierung kann entweder am LABEL-Element oder in dem darin enthaltenen P-Element vorgenommen werden. Wird sie wie oben im Beispiel am LABEL vorgenommen, erscheint der Text über dem eigentlichen Label, sonst links daneben.