Field Appearance

You can change the appearance of each field using configuration options or custom CSS classes.

Field Sizes

You can now assign a size (i.e., width) to every text based or drop down field (even default fields). When you edit a field, you will see the options Small, Medium, Large and Auto. Auto means it uses the browser's default. The browser's default is usually some fixed width for text fields and the size of the options for drop downs.

"Compound" default fields like Name, Address or Designations get all of their fields set to the width assigned to it.

Small, Medium and Large are just classes assigned to the input fields. So, you can modify these using styles. Right now, these are set to a percentage of the width of the containing DIV. So, Small = 25%, Medium = 50% and Large = 75%. However, you could change them to fixed widths if you want in a style.

Field CSS Classes

You can now assign custom CSS classes to each field (even default fields). When you edit a field, just put one or more classes with a space between each in the "CSS Classes" field. This gets applied to the outermost parent div. The structure of each field is as follows:

<div class="your classes go here">
  <label>Label</label>
  <div class="field-area">
    <input (field)>
    <span (hint)>
  </div>
</div>

To change a label red, add a red class to the field of interest and then add the following style:

div.red label {color: red;}

To make the hint red:

div.red div span {color: red;}