Orbeon Forms
Search…
Grids CSS

HTML markup

Form Runner grids produce HTML markup which is different whether a grid is repeated or not.
This page shows the markup produced by Orbeon Forms 2016.2.

Non-repeated grids without rowspans

[SINCE Orbeon Forms 2016.2]
Grids which are not repeated and do not include rowpans do not use a <table> element but use instead <div>s:
1
<div class="fr-grid fr-grid-2 fr-norepeat">
2
<div class="fr-grid-body">
3
<div class="fr-grid-tr">
4
<div class="fr-grid-td">
5
<div class="fr-grid-content"><!-- Control --></div>
6
</div>
7
<div class="fr-grid-td">
8
<div class="fr-grid-content"><!-- Control --></div>
9
</div>
10
</div>
11
<div class="fr-grid-tr">
12
<div class="fr-grid-td">
13
<div class="fr-grid-content"><!-- Control --></div>
14
</div>
15
<div class="fr-grid-td">
16
<div class="fr-grid-content"><!-- Control --></div>
17
</div>
18
</div>
19
<div class="fr-grid-tr">
20
<div class="fr-grid-td">
21
<div class="fr-grid-content"><!-- Control --></div>
22
</div>
23
<div class="fr-grid-td">
24
<div class="fr-grid-content"><!-- Control --></div>
25
</div>
26
</div>
27
</div>
28
</div>
Copied!

Non-repeated grids with rowspans

Grids which are not repeated and do include rowpans use a <table> element with role="presentation":
1
<table class="fr-grid fr-grid-2 fr-norepeat" role="presentation">
2
<tbody class="fr-grid-body">
3
<tr class="fr-grid-tr">
4
<td class="fr-grid-td">
5
<div class="fr-grid-content"><!-- Control --></div>
6
</td>
7
<td rowspan="3" class="fr-grid-td">
8
<div class="fr-grid-content"><!-- Control --></div>
9
</td>
10
</tr>
11
<tr class="fr-grid-tr">
12
<td class="fr-grid-td">
13
<div class="fr-grid-content"><!-- Control --></div>
14
</td>
15
</tr>
16
<tr class="fr-grid-tr">
17
<td class="fr-grid-td">
18
<div class="fr-grid-content"><!-- Control --></div>
19
</td>
20
</tr>
21
</tbody>
22
</table>
Copied!

Repeated grids

Repeated grids:
  • include a header row
  • include a left or right column with icons and menus
  • produce repeated rows following the Orbeon Forms XForms <xf:repeat> output
  • use a <table> element
Example:
1
<table class="fr-grid fr-grid-2 fr-grid-image-attachments table table-bordered table-condensed fr-repeat fr-repeat-single-row">
2
<colgroup>
3
<col id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1411" class="fr-repeat-column-left xforms-group xforms-visited">
4
<col class="fr-grid-col-1">
5
<col class="fr-grid-col-2">
6
</colgroup>
7
<thead class="fr-grid-head">
8
<tr class="fr-grid-master-row">
9
<th id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1412" class="fr-repeat-column-left xforms-group xforms-visited">
10
<!-- + button -->
11
</th>
12
<th class="fr-grid-th"><!-- Column header --></th>
13
<th class="fr-grid-th"><!-- Column header --></th>
14
</tr>
15
</thead>
16
<tbody class="fr-grid-body">
17
<tr id="repeat-begin-fr-view-wizard≡attachment-controls-section≡image-attachments-control≡image-attachments-control-repeat" class="xforms-repeat-begin-end"></tr>
18
<tr class="xforms-repeat-delimiter"></tr>
19
<tr class="fr-grid-tr can-remove can-move-down can-insert-above can-insert-below" id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡fr-tr⊙1">
20
<td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448⊙1" class="fr-repeat-column-left xforms-group xforms-visited">
21
<div class="dropdown"><!-- Dropdown menu --></div>
22
</td>
23
<td class="fr-grid-td">
24
<div class="fr-grid-content"><!-- Control --></div>
25
</td>
26
<td class="fr-grid-td">
27
<div class="fr-grid-content"><!-- Control --></div>
28
</td>
29
</tr>
30
<tr class="xforms-repeat-delimiter"></tr>
31
<tr class="fr-grid-tr can-remove can-move-up can-insert-above can-insert-below xforms-repeat-selected-item-1" id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡fr-tr⊙2">
32
<td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448⊙2" class="fr-repeat-column-left xforms-group xforms-visited">
33
<div class="dropdown"><!-- Dropdown menu --></div>
34
</td>
35
<td class="fr-grid-td">
36
<div class="fr-grid-content"><!-- Control --></div>
37
</td>
38
<td class="fr-grid-td">
39
<div class="fr-grid-content"><!-- Control --></div>
40
</td>
41
</tr>
42
<tr class="xforms-repeat-delimiter"></tr>
43
<tr class="xforms-repeat-template" id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡fr-tr">
44
<td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448" class="fr-repeat-column-left xforms-group">
45
<div class="dropdown"><!-- Dropdown menu --></div>
46
</td>
47
<td class="fr-grid-td">
48
<div class="fr-grid-content"><!-- Control --></div>
49
</td>
50
<td class="fr-grid-td">
51
<div class="fr-grid-content"><!-- Control --></div>
52
</td>
53
</tr>
54
<tr id="repeat-end-fr-view-wizard≡attachment-controls-section≡image-attachments-control≡image-attachments-control-repeat" class="xforms-repeat-begin-end"></tr>
55
</tbody>
56
</table>
Copied!