Manual.rst: extended description & example to templateGroup.

extension/Documentation/Manual.rst

@@ -1192,8 +1192,8 @@ beside every *templateGroup*. The first copy of a templateGroup can't be removed
     * *tgAddText*: Text shown on the button. Default: `Add`.
     * *tgRemoveClass*: Class of the 'remove' button. Default: `btn btn-default`.
     * *tgRemoveText*: Text shown on the button. Default: `Remove`.
-    * *tgClass*: Class wrapped around every copy of the *templateGroup*. E.g. the class `qfq-child-margin-top` adds a
-      margin between two copies of the *templateGroup*. Default: empty
+    * *tgClass*: Class wrapped around every copy of the *templateGroup*.
+      E.g. the class `qfq-child-margin-top` adds a margin between two copies of the *templateGroup*. Default: empty
 
 Multiple *templateGroups* per form are allowed.
 
@@ -1201,6 +1201,8 @@ The name of the native FormElements, inside the templateGroup, which represents
 `%d`. E.g. the columns `grade1`, `grade2`, `grade3` needs a *FormElement.name* = `grade%d`. The counting will always start with 1.
 The placeholder `%d` can also be used in the *FormElement.label*
 
+Example of styling the Add/ Delete Button: :ref:`example_class_template_group`
+
 Class: Native
 -------------
 
@@ -2359,17 +2361,20 @@ Relation: `Person.id = Address.personId`
     * `sqlInsert={{INSERT INTO Note (note) VALUES ('{{note:F:allbut:s}}') }}`
     * `sqlUpdate={{UPDATE Note SET note='{{note:F:allbut:s}}' WHERE id={{slaveId:V}} }}`
 
+.. _example_class_template_group:
+
 Icons Template Group
 ^^^^^^^^^^^^^^^^^^^^
 
- * FormElement.parameter
+This example will display grafics instead of text 'add' and 'remove'. Also there is a distance between the templateGroups.
 
-::
+ * FormElement.parameter::
 
-     tgAddClass=btn alert-success
-     tgAddText=<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-     tgRemoveClass=btn btn-danger alert-danger
-     tgRemoveText=<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+     tgClass = qfq-child-margin-top
+     tgAddClass = btn alert-success
+     tgAddText = <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+     tgRemoveClass = btn btn-danger alert-danger
+     tgRemoveText = <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
 
 Chart
 ^^^^^