| ... |
... |
@@ -1,6
+1,6 @@ |
| 1 |
1 |
Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Statt die Nummerierung im {{smallcaps}}Html{{/smallcaps}} fest zu hinterlegen, können wir sie dynamisch durch {{smallcaps}}Css{{/smallcaps}} hinzufügen. |
| 2 |
2 |
|
| 3 |
|
-{{figure image="gettingstarted_css_counter_repeatable_elements_de.png" width="600"}} |
|
3 |
+{{figure image="example_css_counter_repeatable_elements_de.png" width="600"}} |
| 4 |
4 |
Anzeige einer fortlaufenden Nummer an wiederholbaren Elementen. Unter den Grundeigeschaften wird das Element wiederholbar gemacht. Im CSS-Bereich wird die Nummerierung mittels CSS-Zählern hinzugefügt. |
| 5 |
5 |
{{/figure}} |
| 6 |
6 |
|
| ... |
... |
@@ -10,7
+10,7 @@ |
| 10 |
10 |
|
| 11 |
11 |
== Änderungen im CSS-Bereich == |
| 12 |
12 |
|
| 13 |
|
-Im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] können wir nun die Nummerierung vornehmen. Dies geschieht mit den CSS-Eigenschaften //counter-reset// sowie //counter-increment//. Im {{smallcaps}}CSS{{/smallcaps}} 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: |
|
13 |
+Im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] können wir nun die Nummerierung vornehmen. Dies geschieht mit den {{smallcaps}}Css{{/smallcaps}}-Eigenschaften //counter-reset// sowie //counter-increment//. Im {{smallcaps}}Css{{/smallcaps}} 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: |
| 14 |
14 |
|
| 15 |
15 |
* Der Anfangswert ist 0. |
| 16 |
16 |
* Nun wird die HTML-Struktur des Formulars von oben nach unten durchgegangen. |
| ... |
... |
@@ -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 |
+Sie können die Nummerierung entweder dem LABEL-Element oder dem P-Element innerhalb des Labels hinzufügen. Beim Hinzufügen zum P-Element, wie im obigen Beispiel, wird die Nummerierung links von der Beschriftung angezeigt. Andernfalls wird es oben angezeigt. |