Added vertical option for checkboxes

Author: =

src/css/alpaca-fields.css

@@ -316,6 +316,11 @@ table.dt-rowReorder-float .alpaca-table-reorder-draggable-cell
     margin-left: 10px;
 }
 
+.alpaca-control.checkbox
+{
+  margin-left: 10px;
+}
+
 .alpaca-control.radio label
 {
     line-height: 20px;

src/js/fields/list/CheckBoxField.js

@@ -44,6 +44,13 @@
                     this.options.rightLabel = "";
                 }
             }
+
+            // assume vertical orientation
+            // empty select first to false by default
+            if (Alpaca.isUndefined(this.options.vertical))
+            {
+                this.options.vertical = true;
+            }
         },
 
         prepareControlModel: function(callback)
@@ -108,6 +115,16 @@
                     afterChangeHandler();
                 });
 
+                // stack checkbox selectors vertically
+                if (self.options.vertical)
+                {
+                  $(self.control).css("display", "block");
+                }
+                else
+                {
+                  $(self.control).css("display", "inline-block");
+                }
+
                 callback();
             });
         },
@@ -216,6 +233,12 @@
                         "description": "Whether to constrain the field's schema enum property to the values that come back from the data source.",
                         "type": "boolean",
                         "default": true
+                    },
+                    "vertical": {
+                        "title": "Position the checkbox selector items vertically",
+                        "description": "By default, checkbox controls are stacked vertically.  Set to false if you'd like checkbox controls to lay out horizontally.",
+                        "type": "boolean",
+                        "default": true
                     }
                 }
             });
@@ -248,4 +271,4 @@
     Alpaca.registerFieldClass("checkbox", Alpaca.Fields.CheckBoxField);
     Alpaca.registerDefaultSchemaFieldMapping("boolean", "checkbox");
 
-})(jQuery);
+})(jQuery);