| ... |
... |
@@ -22,25
+22,25 @@ |
| 22 |
22 |
Bevor wir das {{smallcaps}}Css{{/smallcaps}} 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//. |
| 23 |
23 |
|
| 24 |
24 |
{{code language="css"}} |
| 25 |
|
-/* Container der wiederholbaren Element auswählen */ |
| 26 |
|
-/* Und den Zähler hier zurücksetzen */ |
|
25 |
+/* Select the container of repeatable elements */ |
|
26 |
+/* And reset the counter here */ |
| 27 |
27 |
.xm-item-div[data-xm-dynamic] { |
| 28 |
28 |
counter-reset: counterWdh; |
| 29 |
29 |
} |
| 30 |
30 |
|
| 31 |
|
-/** Für jedes wiederholte Element den Zähler um eins erhöhen */ |
|
31 |
+/** For each repeated element, increment the counter by one */ |
| 32 |
32 |
.dynamic-row { |
| 33 |
33 |
counter-increment: counterWdh; |
| 34 |
34 |
} |
| 35 |
35 |
|
| 36 |
|
-/* Den Beschriftungstext der Formularelemente auswählen */ |
|
36 |
+/* Select the label text of each for element */ |
| 37 |
37 |
.dynamic-row label > p::before, |
| 38 |
38 |
.dynamic-row legend::before { |
| 39 |
|
- /** Die Nummer vor dem Text hinzufügen */ |
|
39 |
+ /** Add the number in front of the label */ |
| 40 |
40 |
content: counter(counterWdh) ". "; |
| 41 |
|
- /** Und zu Demozwecken blau einfärben */ |
|
41 |
+ /** And make it blue */ |
| 42 |
42 |
color: blue; |
| 43 |
43 |
} |
| 44 |
44 |
{{/code}} |
| 45 |
45 |
|
| 46 |
|
-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. |
|
46 |
+We could add the numbering either to the //LABEL// element or to the //P// element inside the label. When added to the //P// element, as in the example above, the numbering shows up to the left of the label. Otherwise, it shows up on top of the label. |