Labels and form layout

From pmusers
Jump to: navigation, search

To force labels to always appear above their fields, instead of to their left, the following JavaScript can be added to the Dynaform, to force the label and its field to both occupy 12 columns of width in the form:

$("#fieldID").children("div").eq(0).removeClass()
$("#fieldID").children("div").eq(0).addClass("col-sm-12.col-md-12.col-lg-12")
$("#fieldID").children("div").eq(0).find("label").css("float", "left")
$("#fieldID").children("div").eq(1).removeClass()
$("#fieldID").children("div").eq(1).addClass("col-sm-12 col-md-12 col-lg-12 pmdynaform-field-control")
$("#fieldID").children("div").eq(1).css("float", "left")
$("#fieldID").children("div").eq(1).css("padding-left", "0")

Where fieldID is the ID of the field.

Rather than writing out this code for each field in a Dynaform, it is recommended create a function to execute this code. Then, loop through all the fields when the Dynaform loads and call this function for each field, as shown in the following example:

//Set to the field types whose labels should be moved to top of field:
var aFieldTypes = ["text", "textarea", "dropdown", "checkbox", "checkgroup", 
  "suggest", "datetime", "radio", "link", "image", "file", "multipleFile", 
  "signature", "scannerCode", "geomap", "imageMobile", "audioMobile", "videoMobile"];

function moveLabelToTop(fieldId, fieldType, colSpan) {
  //if in the list of field types whose labels can be moved on top of their fields:
  if (aFieldTypes.indexOf( fieldType ) != -1) { 
    if (fieldType == 'geomap') {
      aDivs = $("#"+fieldId).children();
      aDivs.eq(0).removeClass();
      aDivs.eq(0).addClass("col-sm-"+colSpan+" col-md-"+colSpan+" col-lg-"+colSpan+" control-label pmdynaform-label");
      aDivs.css("float", "left");
      aDivs.find("span").css("float", "left");
      
      aDivs.eq(1).removeClass();
      aDivs.eq(1).addClass("col-sm-"+colSpan+" col-md-"+colSpan+" col-lg-"+colSpan+" pmdynaform-field-control");
      aDivs.eq(1).css("padding-left", "0");
    }
    else {
      if (fieldType == 'multipleFile') {
        aDivs = $("#"+fieldId).children("div").children("div");
      }
      else {
        aDivs = $("#"+fieldId).children("div");
      }
    
      aDivs.eq(0).removeClass();
      aDivs.eq(0).addClass("col-sm-"+colSpan+" col-md-"+colSpan+" col-lg-"+colSpan);
      aDivs.eq(0).find("label").css("float", "left");
      aDivs.eq(1).removeClass();
      aDivs.eq(1).addClass("col-sm-"+colSpan+" col-md-"+colSpan+" col-lg-"+colSpan+" pmdynaform-field-control");
      aDivs.eq(1).css("float", "left");
      aDivs.eq(1).css("padding-left", "0");
    }
  }
}

function processFields(oFields) {
  for (fieldId in oFields) {
    var fType = oFields[ fieldId ].attributes.type;
  
    if (fType == "form") {
 	  processFields( oFields[ fieldId ].attributes.formModel.attributes.fields );  
    }
    else {
      moveLabelToTop(fieldId, fType, 12);
    }
  }
}


var formId = $("form").prop("id");
var oFieldsList = getFormById( formId ).model.attributes.fields;
processFields(oFieldsList);

Here is an example to test it:


Process: Labels_on_top-1.pmx (right click and select Save Link As)
Tested in: PM 3.3.4 Enterprise in Debian 9.5 with Firefox 60.5


labelsOnTop.png