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:

<div class="fr-grid fr-grid-2 fr-norepeat">
    <div class="fr-grid-body">
        <div class="fr-grid-tr">
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
        </div>
        <div class="fr-grid-tr">
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
        </div>
        <div class="fr-grid-tr">
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
            <div class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </div>
        </div>
    </div>
</div>

Non-repeated grids with rowspans

Grids which are not repeated and do include rowpans use a <table> element with role="presentation":

<table class="fr-grid fr-grid-2 fr-norepeat" role="presentation">
    <tbody class="fr-grid-body">
        <tr class="fr-grid-tr">
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
            <td rowspan="3" class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
        <tr class="fr-grid-tr">
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
        <tr class="fr-grid-tr">
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
    </tbody>
</table>

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:

<table class="fr-grid fr-grid-2 fr-grid-image-attachments table table-bordered table-condensed fr-repeat fr-repeat-single-row">
    <colgroup>
        <col id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1411" class="fr-repeat-column-left xforms-group xforms-visited">
        <col class="fr-grid-col-1">
        <col class="fr-grid-col-2">
    </colgroup>
    <thead class="fr-grid-head">
        <tr class="fr-grid-master-row">
            <th id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1412" class="fr-repeat-column-left xforms-group xforms-visited">
                <!-- + button -->
            </th>
            <th class="fr-grid-th"><!-- Column header --></th>
            <th class="fr-grid-th"><!-- Column header --></th>
        </tr>
    </thead>
    <tbody class="fr-grid-body">
        <tr id="repeat-begin-fr-view-wizard≡attachment-controls-section≡image-attachments-control≡image-attachments-control-repeat" class="xforms-repeat-begin-end"></tr>
        <tr class="xforms-repeat-delimiter"></tr>
        <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">
            <td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448⊙1" class="fr-repeat-column-left xforms-group xforms-visited">
                <div class="dropdown"><!-- Dropdown menu --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
        <tr class="xforms-repeat-delimiter"></tr>
        <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">
            <td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448⊙2" class="fr-repeat-column-left xforms-group xforms-visited">
                <div class="dropdown"><!-- Dropdown menu --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
        <tr class="xforms-repeat-delimiter"></tr>
        <tr class="xforms-repeat-template" id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡fr-tr">
            <td id="fr-view-wizard≡attachment-controls-section≡image-attachments-control≡xf-1448" class="fr-repeat-column-left xforms-group">
                <div class="dropdown"><!-- Dropdown menu --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
            <td class="fr-grid-td">
                <div class="fr-grid-content"><!-- Control --></div>
            </td>
        </tr>
        <tr id="repeat-end-fr-view-wizard≡attachment-controls-section≡image-attachments-control≡image-attachments-control-repeat" class="xforms-repeat-begin-end"></tr>
    </tbody>
</table>