It's all about css stuff; the basic css comand needed are as follows:
float:left; /* the next element shall be to my left*/
clear:both; /* I will stand in the next line, I don't care what my pregoing elemnt wants */
width: 150px; /*oder*/ width: 250px; /*often elements would like to float,
but are too big; so cut down the size a little*/
Helpful: FireFox-Addon "Firebug", get it, you'll love it!
2 Possibilities for horizontal fields
(6.1) via css
Every form field and every label has an own id or other html attribute. They are accessible via css.
Example xml:
[field name="zutaten" label="Checkboxes" type="checkboxes"]
[option value="1"]Salami[/option]
[option value="2"]Champignons[/option]
[option value="3"]Käse extra[/option]
[option value="4"]Noch mehr Käse[/option]
[/field]
css commands:
#jform_zutaten li {float:left; display:block; width:200px; height:50px;}
#jform_zutaten li:nth-child(2n-1) {clear:both;} /*that means, every 1st,, 3rd, 5th etc. field ist displayed in a new line; works in FireFox and IE9; might not work on IE8.*/
Where to find css files? Go to the css files of your template. You find them here:
a) either via files: templates/yourTemplateName/css/styleSheetName.css
b) or via Joomla administration: Extensions>Template Manager>Templates>yourTemplateName Details and Files>styleSheetName.css
(6.2) Via html
(Rather for developers.) Generate an overriding layout. Generate copies of all files that you can find in modules/mod_qlform/tmpl/..., e. g.:
- templates/yourTemplate/html/mod_qlform/default.php
- templates/yourTemplate/html/mod_qlform/default_formPurehtml.php
- templates/yourTemplate/html/mod_qlform/default_formBootstrap.php
- ...
In the module params (tab "styles") you have chosen whether you want to have pure html or a bootstrap form. (Default setting ist pure html.) According to this param adjust one of the following files:
- templates/yourTemplate/html/mod_qlform/default_formPurehtml.php
- templates/yourTemplate/html/mod_qlform/default_formBootstrap.php
In the original files the form ist generate automatically via ->getFieldsetsWe're gonna change this now.
The field should be available as separate fields (that means e. g. not one "checkboxes" field, but several "checkbox" fields. Now you can generate labels an inputs via following commands:
- echo $form->getInput('fieldId');
- echo $form->getLabel('fieldId');
These commands you can a. g. put into a table.
Example xml:
[field name="salami" id="salami" label="Salami" type="checkbox" /]
[field name="champignons" id="champignons" label="Champignons" type="checkbox" /]
[field name="kaese-plus" id="kaese-plus" label="Käse extra" type="checkbox" /]
[field name="kaese-doppelplus" id="kaese-doppelplus" label="Noch mehr Käse" type="checkbox" /]
The correspanding html
<table>
<tr><?php echo $form->getInput('fieldId');?><td><?php echo $form->getInput('fieldId');?></td></tr>
<tr><?php echo $form->getInput('fieldId2');?><td><?php echo $form->getInput('fieldId2');?></td></tr>
</table>