Form Engine – CSS Controls Documentation

 

Here are the most common CSS formulas used in both Dynamic and Static forms:

 

Function

Code (selector)

Hiding buttons:

Entire Nav bar and buttons
nav#render-header-section { display: none !important; }

“Submit” button

.fe-btn-submit{display:none !important}

“Reset” button

.fe-btn-reset{display:none !important}

“Print” button

.fe-btn-print{display:none !important}

“Update” button

.fe-btn-update{display:none !important}

Customize Navigation Bar:

Color

nav#render-header-section  {background-color: blue !important;}

Font-Style

nav#render-header-section  {font-family:Helvetica !important;}

Font-Size

nav#render-header-section  {font-size: 7.5 px !important;}

Font Color

nav#render-header-section  {color:black !important;}

Banner color

nav#render-header-section  {background-color: blue !important;}

Hide Form Name

.navbar-title {display: none;}

Changing backgrounds to borders

.ng-valid-required{background-color: white !important; border: solid green 1px;}

Border Color

.ng-valid-required{border: solid green 1px;}

Change field background colors:

Normal/Required fields

.ng-valid-required{background-color: white !important;}

Remove Static Report Headers


.results-table tr.hd { display: none !important; }


Form-level form formatting

of Static form fields (embed these codes into the Custom CSS box for the form:

Font-Style
fe-control {font-family: Times, "Times New Roman", serif !important;}
(and here are other common font families to use: Helvetica, Arial, sans-serif)
Font-Sizefe-control {font-size: 7.5 px !important;}


 Note: the form-level formatting for Static forms is a way to change the default properties of the fields on the form.  Using css codes for form-level formatting will change the default for all fields.  Any individual fields with formatting that has been changed from the default will override the form-level css.  This form-level field formatting control is still in progress, so submit a ticket if you need help with it.


How To: Static Forms

 

In Static Forms, you can access the CSS Controls input area by doing the following:


1. Click the “Options” button in the top ribbon as shown below.

 

A close up of a message Description automatically generated

 

2. Next, look for the “Custom CSS” section. In the provided text box, enter any of the commands shown in the “CSS Codes” section down below.

 

A screenshot of a computer Description automatically generated

3. After entering your commands, simply close out of the options window and click save.

 

4. Upon saving, when you refresh your preview of the form you will see changes incorporated.

 

How To: Dynamic Forms

 

In Dynamic Forms, you can access the CSS Controls input area by doing the following:


1. In the top ribbon, click on the “Source” icon as shown below:

 

 

2. Upon clicking on “Source” icon, you simply find your designated control area and input the desired control from the table above. 

  1. PLEASE NOTE: you must enter your code as follows: <style>.selector{property: value;}</style>
    1. .selector{property: value;} refers to the codes listed in the table above
    2. Example: <style>nav#render-header-section {display: none !important;}</style>

 

A screenshot of a computer Description automatically generated