Hi,
By default, Couch shows each field in the admin panel in a row of its own.
Sometimes though it is desirable to show related fields together in the same row e.g.
While this could be done using <cms:config_form_view> as described at viewtopic.php?f=5&t=10241, I thought it'd be helpful to package everything in a little addon -
This addon makes use of Bootstrap's Grid feature -
http://getbootstrap.com/css/#grid
Installation:
Requires the usual steps -
Download and extract the attached zip which will yield a folder named 'bootstrap-grid'.
Place this folder in 'couch/addons' folder and then add the following entry in 'couch/addons/kfunctions.php' file (if this file is not found, rename the kfunctions.example.php file to kfunctions.php) -
Usage
This addon makes available a new editable region of type 'row'.
To create a group of fields in a row, enclose the definitions of those fields within type 'row' as e.g. as shown below -
Please note the use of 'col-xs-2' as class above with the child fields.
If you are familiar with Bootstrap, you'll recognize it is one of predefined classes it uses for 'columns' -
http://getbootstrap.com/css/#grid-example-basic
Use whatever class suits your use-case with the child fields and they'll show up in columns within the 'row' provided by this addon.
We can also nest the 'rows' within type 'group' regions e.g. as follows (the image above displays the results) -
Hope this is useful.
By default, Couch shows each field in the admin panel in a row of its own.
Sometimes though it is desirable to show related fields together in the same row e.g.
While this could be done using <cms:config_form_view> as described at viewtopic.php?f=5&t=10241, I thought it'd be helpful to package everything in a little addon -
This addon makes use of Bootstrap's Grid feature -
http://getbootstrap.com/css/#grid
Installation:
Requires the usual steps -
Download and extract the attached zip which will yield a folder named 'bootstrap-grid'.
Place this folder in 'couch/addons' folder and then add the following entry in 'couch/addons/kfunctions.php' file (if this file is not found, rename the kfunctions.example.php file to kfunctions.php) -
- Code: Select all
require_once( K_COUCH_DIR.'addons/bootstrap-grid/bootstrap-grid.php' );
Usage
This addon makes available a new editable region of type 'row'.
To create a group of fields in a row, enclose the definitions of those fields within type 'row' as e.g. as shown below -
- Code: Select all
<cms:editable name='test_row' type='row' order='1'>
<cms:editable name='lng' label='Longitude' type='text' class='col-xs-2' />
<cms:editable name='lat' label='Latitude' type='text' class='col-xs-2' />
</cms:editable>
Please note the use of 'col-xs-2' as class above with the child fields.
If you are familiar with Bootstrap, you'll recognize it is one of predefined classes it uses for 'columns' -
http://getbootstrap.com/css/#grid-example-basic
Use whatever class suits your use-case with the child fields and they'll show up in columns within the 'row' provided by this addon.
We can also nest the 'rows' within type 'group' regions e.g. as follows (the image above displays the results) -
- Code: Select all
<cms:editable name='grp_coordinates' label='Coordinates' type='group' >
<cms:editable name='test_row' type='row' order='1'>
<cms:editable name='lng' label='Longitude' type='text' class='col-xs-2' />
<cms:editable name='lat' label='Latitude' type='text' class='col-xs-2' />
</cms:editable>
<cms:editable name='test_row2' type='row' order='2'>
<cms:editable name='directions' label='Directions' type='text' class='col-xs-4' />
</cms:editable>
</cms:editable>
Hope this is useful.