Wiki source code of Nummerierung wiederholbarer Elemente

Hide last authors

version	line-number	content
17.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}}.
1.1	2
17.1	3	{{figure image="example_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.
1.1	5	{{/figure}}
	6
17.1	7	== Changes to the form ==
1.1	8
17.1	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.
1.1	10
17.1	11	== Changes to the CSS ==
1.1	12
17.1	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:
1.1	14
17.1	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.
1.1	19
17.1	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.
8.2	21
17.1	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//.
8.2	23
1.1	24	{{code language="css"}}
8.6	25	/* Select the container of repeatable elements */
	26	/* And reset the counter here */
8.2	27	.xm-item-div[data-xm-dynamic] {
14.1	28	counter-reset: counter;
1.1	29	}
	30
8.6	31	/** For each repeated element, increment the counter by one */
8.2	32	.dynamic-row {
14.1	33	counter-increment: counter;
1.1	34	}
	35
8.6	36	/* Select the label text of each for element */
8.2	37	.dynamic-row label > p::before,
	38	.dynamic-row legend::before {
8.6	39	/** Add the number in front of the label */
17.1	40	/* Example for using letters instead:
	41	content: counter(counter, lower-alpha); */
14.1	42	content: counter(counter) ". ";
8.6	43	/** And make it blue */
1.1	44	color: blue;
	45	}
	46	{{/code}}
	47
17.1	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.

Wiki source code of Nummerierung wiederholbarer Elemente

Navigation