Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.awa
	1	+XWiki.sas

Content

...	...	@@ -1,6 +1,6 @@
1	1	Repeatable elements are elements where the user can create multiple instances, eg. for entering more than one email address. Sometimes we might want to add an incrementing number to each repeated element. We could modify the HTML directly via JavaScript, but that is cumbersome and error-prone. Instead, we can add numbers dynamically via {{smallcaps}}Css{{/smallcaps}}.
2	2
3		-{{figure image="gettingstarted_css_counter_repeatable_elements_en.png" width="600"}}
	3	+{{figure image="example_css_counter_repeatable_elements_en.png" width="600"}}
4	4	Showing an incrementing number for each repeated element. Mark the element as repeatable in the base settings section. Use the CSS tab to add the numbering via CSS counters.
5	5	{{/figure}}
6	6
...	...	@@ -25,12 +25,12 @@
25	25	/* Select the container of repeatable elements */
26	26	/* And reset the counter here */
27	27	.xm-item-div[data-xm-dynamic] {
28		- counter-reset: counterWdh;
	28	+ counter-reset: counter;
29	29	}
30	30
31	31	/** For each repeated element, increment the counter by one */
32	32	.dynamic-row {
33		- counter-increment: counterWdh;
	33	+ counter-increment: counter;
34	34	}
35	35
36	36	/* Select the label text of each for element */
...	...	@@ -37,10 +37,12 @@
37	37	.dynamic-row label > p::before,
38	38	.dynamic-row legend::before {
39	39	/** Add the number in front of the label */
40		- content: counter(counterWdh) ". ";
	40	+ /* Example for using letters instead:
	41	+ content: counter(counter, lower-alpha); */
	42	+ content: counter(counter) ". ";
41	41	/** And make it blue */
42	42	color: blue;
43	43	}
44	44	{{/code}}
45	45
46		-We could add the numbering either to the //LABEL// element or to the //P// element inside the label. When we add it 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.
	48	+You could add the numbering either to the //LABEL// element or to the //P// element inside the label. When we add it 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. Other possible types for a counter are: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.