I have updated this article to correct for the removal of the “dffs_tdWrap” div in the later versions.

This page contains examples on how to use CSS to style the DFFS enhanced form. All discussions and requests for new examples must be done in the forum. If you do not have a user account, please look at the sticky post in the top of the forums for instructions.

Start by setting all widths to auto

When using side-by-side, you must use this snippet in the Custom CSS tab to “prep” all fields to be able to override the individual width:

.sbs_FieldTable *{
 width:auto !important;
}
/* Ensure the tooltip icon won't collapse */
.customTooltipIcon{
 width:18px!important;
}

Set fixed column width when using side-by-side

.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, .sbs_tdIndex_4{
    min-width:200px !important;	
    width:200px !important;
    white-space:normal!important;
}

DFFS automatically adds a class to the side-by-side columns based on the index from left (starting with 1) so this code example will target the first four columns.

The example uses a comma separated list of class names, but you can split these up in different rules to set a different style for each column.

Add a vertical scrollbar to a multiline text field in DispForm

Change YOURFIELDINTERNALNAME with the internal name of your field.

#dffs_YOURFIELDINTERNALNAME textarea{
    max-height:200px;
    max-width:600px;
    overflow-y:auto;
}

Field CSS tab

In the Field CSS tab you can override the CSS for individual fields. Here is a few examples.

input{
    width:150px;
}

Background color in all textareas

textarea{
    background-color:#ffcccc;
}

Background color in single line of text field on focus

input:focus{
    background-color:#ffcccc;
}

Please note that you in DFFS versions below v4.303 might have to use the “!important” flag behind some of the CSS styles to be able to override some styles. Here is an example:

background-color:#ffcccc !important;

Place the tooltip icon to the left of the formlabel

.customTooltip{
    float:none!important;
    display:inline;
    margin-right:5px;
}

Override the width of the sbs_OuterTable in later DFFS versions

.sbs_OuterTable{
    width:250px;
}

Set the width of the formlabel column to line up multiple field labels when using side-by-side

td.ms-formlabel{
    width:130px!important;
    white-space:normal!important;
}

Remove padding below fieldlabel and increase the size of the formlabel when using side-by-side

.sbs_FieldLabel{
    height:auto;
}
.sbs_FieldLabel .ms-formlabel{
    font-size:1.2em;
    font-weight:500;
    padding:2px 2px 0 2px;
}

Split multichoice options in separate lines in DispForm

function showChoicesOnSeparateLines(fin){
    jQuery("#dffs_"+fin+" td.ms-formbody").html(getFieldValue(fin).split("; ").join("<br>"));
}
showChoicesOnSeparateLines("YourFieleInternalName");

You can request more examples in this DFFS forum – see link in the top of this page.

Hope this makes styling DFFS forms easier.

Alexander