CSS-classes

To give an element an css class, use the variable className:

{
  "className":"floatLeft minwidth25",
  "type": "checkbox",
  "defaultValue": false,
  "templateOptions": {
    "label": "Confirm choice"
  },
  "key": "confirm"
}  

CSS - float, width og hide

To get elements to lay side by side with an certain size. Set how much space an element can take by giving it an css class.lasse.

Name	Explanation
floatLeft	Put the element to the left. If more floats, it puts itself after the previous
clearLeft	Remove all the floats on the left side on the same line as this element
floatRightPut the element to the right. If more floats, it puts itself after the previous
clearRight	Remove all the floats on the right side on the same line as this element
clearBoth	Remove all the floats on the both sides on the same line as this element
--	--
width100	(default) The element fills the whole line
width75	The element fills 75% of the line
width50	The element fills 50% of the line
width25	The element fills 25% of the line.
minwidth100	The element fills atleast 100% of the line
minwidth75	The element fills atleast 75% of the line
minwidth50	The element fills atleast 50% of the line
minwidth25	The element fills atleast 25% of the line
--	--
hide	Hides the element

Checkbox after each other

The first element becomes the first element to the left (clearLeft). The other elements places themselves next to it. The elements fills atleast 25% of the line (minwidth25), even if the label takes less space.

{
  "type": "checkbox",
  "className": "floatLeft clearLeft minwidth25",
  "templateOptions": {
    "label": "Check1"
  },
  "key": "checkboxfield18"
},
{
  "type": "checkbox",
  "className": "floatLeft minwidth25",
  "templateOptions": {
    "label": "Checkbox2"
  },
  "key": "checkboxfield18Copy"
},
{
  "type": "checkbox",
  "className": "floatLeft minwidth25",
  "templateOptions": {
    "label": "C3"
  },
  "key": "checkboxfield18CopyCopy"
},
{
  "type": "checkbox",
  "className": "floatLeft minwidth25",
  "templateOptions": {
    "label": "Checkbox4 that has an very long text"
  },
  "key": "checkboxfield18CopyCopyCopy"
}

(This documentation page was last updated on 27.08.2018)