DFFS: Styling

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.

Set all widths to auto

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

.sbs_FieldTable .dffs_tdWrap *{
	width:auto !important;
}
Set fixed column width when using side-by-side

IMG

.sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, .sbs_tdIndex_4{
	min-width:200px !important;	
	width:200px !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.

Advanced users can use the developer tools to inspect the side-by-side fields to find other classes and ids to target with custom CSS.
Add a vertical scrollbar to a multiline text field in DispForm
div.dffs_tdWrap{
max-height:200px;
max-width:300px;
overflow-y:auto;
}
Field CSS tab

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

Width of a single line of text column
input{
width:150px;
}
Background color in textarea
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;

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