AbstractBuildForm, Constants: horizontal and vertical rendering for checkboxes.

formEditor.sql: fixed typo
qfq-bs.css.less: added BS adjustments to render Checkboxes smoothly.

extension/qfq/qfq/AbstractBuildForm.php

@@ -615,6 +615,8 @@ abstract class AbstractBuildForm {
             default:
                 throw new UserException('checkBoxMode: \'' . $formElement['checkBoxMode'] . '\' is unknown.', ERROR_CHECKBOXMODE_UNKNOWN);
         }
+
+//        return Support::wrapTag('<div class="checkbox">', $html, true);
         return $html;
     }
 
@@ -789,6 +791,9 @@ abstract class AbstractBuildForm {
             $html .= $formElement['label2'];
         }
 
+        $html = Support::wrapTag("<label>", $html, true);
+        $html = Support::wrapTag("<div class='checkbox'>", $html, true);
+
         return $html;
     }
 
@@ -804,7 +809,11 @@ abstract class AbstractBuildForm {
     }
 
     /**
-     * Build as many Checkboxes as items
+     * Build as many Checkboxes as items.
+     *
+     * Layout: The Bootstrap Layout needs very special setup, the checkboxes are wrapped differently with <div class=checkbox>
+     *         depending of if they aligned horizontal or vertical.
+     *
      * @param array $formElement
      * @param $htmlFormElementId
      * @param $attributeBase
@@ -821,8 +830,11 @@ abstract class AbstractBuildForm {
 
         $html = $this->buildNativeHidden($htmlFormElementId, '');
 
+        $orientation = ($formElement[CHECKBOX_ORIENTATION] === 'vertical') ? '' : 'checkbox-inline';
+
         $flagFirst = true;
-        for ($ii = 0; $ii < count($itemKey); $ii++) {
+        for ($ii = 0, $jj = 1; $ii < count($itemKey); $ii++, $jj++) {
+
             $attribute = $attributeBase;
 
             // Do this only the first round.
@@ -839,14 +851,19 @@ abstract class AbstractBuildForm {
                 $attribute .= $this->getAttribute('checked', 'checked');
             }
 
-            $html .= '<input ' . $attribute . '>';
-            $html .= $itemValue[$ii];
-            if ($ii === $formElement['maxLength']) {
-                $ii = 0;
-                $html .= '<br>';
-            }
+            $htmlCheckbox = '<input ' . $attribute . '>';
+            $htmlCheckbox .= $itemValue[$ii];
+
+            $htmlCheckbox = Support::wrapTag("<label class='$orientation'>", $htmlCheckbox, true);
+            if ($formElement[CHECKBOX_ORIENTATION] === 'vertical')
+                $htmlCheckbox = Support::wrapTag("<div class='checkbox'>", $htmlCheckbox, true);
+
+            $html .= $htmlCheckbox;
         }
 
+        if ($formElement[CHECKBOX_ORIENTATION] !== 'vertical')
+            $html = Support::wrapTag("<div class='checkbox'>", $html, true);
+
         return $html;
     }
 

extension/qfq/qfq/Constants.php

@@ -273,4 +273,6 @@ const SYMBOL_EDIT = 'edit';
 
 //CHECKBOX
 const CHECKBOX_VALUE_CHECKED = 'checked';
-const CHECKBOX_VALUE_UNCHECKED = 'unchecked';
+const CHECKBOX_VALUE_UNCHECKED = 'unchecked';
\ No newline at end of file
+const CHECKBOX_ORIENTATION = 'orientation';
+//

extension/qfq/sql/formEditor.sql

@@ -200,7 +200,7 @@ VALUES
   (2, 'ord', 'Order', 'show', 'text', 'native', 230, 40, 255, '', '', '', '', '', '', 101, ''),
   (2, 'tabindex', 'tabindex', 'show', 'text', 'native', 240, 40, 255, '', '', '', '', '', '', 101, ''),
   (2, 'size', 'Size', 'show', 'text', 'native', 250, 40, 255, '', '', '', '', '', '', 102, ''),
-  (2, 'maxlength', 'Maxlength', 'show', 'text', 'native', 260, 40, 255, '', '', '', '', '', '', 102, ''),
+  (2, 'maxLength', 'Maxlength', 'show', 'text', 'native', 260, 40, 255, '', '', '', '', '', '', 102, ''),
   (2, 'note', 'note', 'show', 'text', 'native', 270, 40, 255, '', '', '', '', '', '', 102, ''),
   (2, 'tooltip', 'Tooltip', 'show', 'text', 'native', 280, 40, 255, '', '', '', '', '', '', 102, ''),
   (2, 'placeholder', 'Placeholder', 'show', 'text', 'native', 290, 40, 255, '', '', '', '', '', '', 102, ''),

less/qfq-bs.css.less

@@ -12,4 +12,14 @@
 
 .form-inline .control-label {
   font-weight: normal;
+}
+
+/* reduce unwished padding-top offset */
+.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
+  padding-top: 0;
+}
+
+/* checkbox, inline oriented, have a different unwished offset */
+.form-horizontal .checkbox-inline, .form-horizontal .radio-inline {
+  margin-top: -4px;
 }
\ No newline at end of file