Commit 03b7e8e0 authored by Carsten  Rose's avatar Carsten Rose
Browse files

index.rst: description for bsLabelColumn, bsInputColumn, bsNoteColumn

parent 1abdad02
......@@ -1561,43 +1561,47 @@ Form Layout
-----------
The forms will be rendered with Bootstrap CSS classes, based on the 12 column grid model (Bootstrap 3.x).
Generally a 3 column layout for *label* columne on the left side, an *input* field column in the middle and a *note*
Generally a 3 column layout for *label* columns on the left side, an *input* field column in the middle and a *note*
column on the right side will be rendered.
The used default column (=bootstrap grid) width is *3,6,3* for *label, input, note*.
Individual settings can be done via *FORM_BS_<type>_COLUMNS* (config.qfq.ini) or *bs<type>Columns* (parameter). *type*
is *label*, *input*, *note*.
* The system wide default can be changed via config.qfq.ini :ref:`config.qfq.ini` - the new settings are the default settings for all forms.
* The system wide default can be changed via config.qfq.ini :ref:`config.qfq.ini` - the new settings are the default
settings for all forms.
* Per *Form* settings can be done in the *Form* parameter field. They overwrite the system wide default.
* Per *FormElement* settings can be done in the *FormElement* parameter field. They overwrite the *Form* setting.
A column will be switched off by setting a `0` on the respective column.
A column will be switched off (no wrapping via `<div class='col-md-?>`) by setting a `0` on the respective column.
Custom field width
^^^^^^^^^^^^^^^^^^
Per 'row' the width of the three columns 'label', 'input' and 'note' can be configured for via BS Column fields on the
*FormElement*.
Per *FormElement* set `BS Label Columns`, `BS Input Columns` or `BS Note Columns` to customize an individual width.
The sum of these three columns should always be 12.
Multiple Elements per row
^^^^^^^^^^^^^^^^^^^^^^^^^
Every row is automatically wrapped in a `<div class='form-group'>` and every column is wrapped in a `<div class='col-md-?>`.
To display multiple input elements in one row, all *FormElements* for the row has to be customized:
Every row is by default wrapped in a `<div class='form-group'>` and every column is wrapped in a `<div class='col-md-?>`.
To display multiple input elements in one row, the wrapping of the *FormElement* row and of the three columns can be
customized via the checkboxes of `Label / Input / Note`. Every open and every close tag can be individually switched on
or off.
E.g. to display 2 *FormElements* in a row with one label (first *FormElement*) and one note (last *FormElement*) we need
the following (switch off all non named):
* First *FormElement*
* First *FormElement*:
* open row tag: `row` ,
* open and close label tag: `label`, `/label`,
* open and close field tag: `input`, `/input`,
the `row`-open and `/row`-close tags have to be customized: the `row`-open tag
is enabled on the first element, for the middle elements the `row` and `/row` tags are disabled and the last
*FormElement* the `row`-open is disabled and `/row`-close is enabled.
* Second *FormElement*
* First Element of the row:
* open and close field tag: `input`, `/input`,
* open and close note tag: `note`, `/note`,
* close row tag: `/row` ,
* *FormElement* > Layout > Wrap: Row,Label,Input,Note: `row` = on, all other off.
* Switch off
Report
======
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment