Summary

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

Details

Page properties

Content

...	...	@@ -1,40 +1,46 @@
1		-Sometimes it may be necessary or useful to add ordinal numbers to number dynamic elements. This can be achieved by using CSS.
	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		-For the following example, create a new form and add a form element of type [[selection>>doc:Auswahl]] to the form. Let its name be //sel1//.
4		-
5		-{{figure image="076En.png"}}
6		-Numering dynamic elements purely with CSS
	3	+{{figure image="gettingstarted_css_counter_repeatable_elements_en.png" width="600"}}
	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.
7	7	{{/figure}}
8	8
9		-== Required Javascript ==
	7	+== Changes to the form ==
10	10
11		-Open the [[script tab>>doc:TAB - Script]] and activate dynamic mode for the element //sel1// by using the function [[dynamic()>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdditionalScriptFunctions.Dynamic]].
	9	+First we open the {{designer/}} and add some form elements to the form. Now we make these elements repeatable by clicking on the checkbox in the [[base settings section>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]] of the properties panel.
12	12
13		-{{code language="javascript"}}
14		-$('[name="tf1"]').dynamic()
15		-{{/code}}
	11	+== Changes to the CSS ==
16	16
17		-== Required CSS ==
	13	+We open [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] and enter the appropriate {{smallcaps}}Css{{/smallcaps}} that will do the numbering for us. For this, we use the {{smallcaps}}Css{{/smallcaps}} properties //counter-reset// together with the property //counter-increment//. {{smallcaps}}Css{{/smallcaps}} allows for one or many counters. Each counter has got a unique name and a current value. And when does the counter increase? This works as follows:
18	18
19		-Open the [[CSS tab>>doc:CSS-Bereich]] 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 {{formcycle/}}.
	15	+* The initial value is set to 0.
	16	+* Now each HTML element is visited in order of occurrence.
	17	+* When an element with the {{smallcaps}}Css{{/smallcaps}} property //counter-reset// is encountered, the counter is reset to the given value
	18	+* When an element with the {{smallcaps}}Css{{/smallcaps}} property //counter-increment// is encountered, the counter is increased by one.
20	20
	20	+We can use this behavior and increment the counter for each repeated element. This lets us add the current value of the counter before the label of each element. We achieve this with the pseudo element //before// and //counter(...)// to insert the current value.
	21	+
	22	+Before we get to the {{smallcaps}}Css{{/smallcaps}}, we need to recall two things. Each form element is put inside a container (div) with the class //xm-item-div//. That container also gets the attribute //xn//, which is set to the current name of the form element. Additionally, each repeated element itself is also put inside a container element with the class //dynamic-row//.
	23	+
21	21	{{code language="css"}}
22		-[xn="tf1"] {
23		- counter-reset: tf1row;
	25	+/* Select the container of repeatable elements */
	26	+/* And reset the counter here */
	27	+.xm-item-div[data-xm-dynamic] {
	28	+ counter-reset: counterWdh;
24	24	}
25	25
26		-[xn="tf1"] > .dynamic-row > label:before {
27		- counter-increment: tf1row;
28		- content: "Überschrift für Zeile " counter(tf1row);
29		- color: red;
	31	+/** For each repeated element, increment the counter by one */
	32	+.dynamic-row {
	33	+ counter-increment: counterWdh;
30	30	}
31	31
32		-[xn="tf1"] > .dynamic-row > label > p:before {
33		- content: "Text vor der Zeile " counter(tf1row) ". ";
	36	+/* Select the label text of each for element */
	37	+.dynamic-row label > p::before,
	38	+.dynamic-row legend::before {
	39	+ /** Add the number in front of the label */
	40	+ content: counter(counterWdh) ". ";
	41	+ /** And make it blue */
34	34	color: blue;
35	35	}
36		-.dynamic-row {
37		- margin-top: 1em;
38		- margin-bottom: 1em;
39		-}
40	40	{{/code}}
	45	+
	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.