cancel
Showing results for 
Search instead for 
Did you mean: 

Update Disabled Control Styling

Workflow Hero
4 4 1,460

I was working on a Nintex Form for a client recently where there were several disabled fields. Actually, based on the type of request they were submitting, anywhere from 2 to 20ish fields could be disabled. The problem was that the default styling of disabled fields is not much different than enabled fields and our client wanted to make it more obvious which fields the user should be focusing on for certain scenarios. Allow me to explain...

The Default Styling

The following screenshots show the default Nintex Forms styling. Initially, when the form for this scenario loads, all fields are disabled until a Type of Request is selected.

Default Styling- All Fields Disabled

You'll also notice that the Person or Group controls do not have the same white background as all other controls. So, we will address that with this solution as well.

There are basically two main scenarios for this form:

  1. If the Type of Request equals "New Requirement", then only the Course Code and Justification controls are enabled.
  2. If the Type of Request does not equal "New Requirement", then the Course Code and Justification controls are disabled and everything else is enabled.

Notice in the screenshot below how subtle the differences are in the two scenarios.

Default Styling - Compare New Vs Not New Selection

Since this was a main functionality of this form, we needed to make this distinction more obvious and clear to the users submitting these requests.

The Updated Form

In addition to some other custom styling, you can see on the screenshot below, that all fields which are disabled initially are shaded in a darker gray color.

Custom Styling - All Fields Disabled

As the user selects the Type of Request, the disabled fields remain shaded gray and enabled fields are updated to have a white input area, which makes it much more obvious to quickly and easily identify which fields need to be filled in.

Custom Styling - Compare New Vs Not New Selection

The Custom CSS

So, how did we achieve this updated look?

With just a bit of custom CSS.

From the Nintex Forms Designer, open the Settings dialog box from the ribbon, and then expand the Custom CSS section. Scroll all the way to the bottom and paste the following code.

Alternatively, you can save this code snippet to an external stylesheet and reference the file from the Advanced > Custom CSS includes section in Form Settings.

/*darken background of disabled input fields*/

input[type=password][disabled], input[type=text][disabled], input[type=file][disabled], textarea[disabled], select[disabled], .sp-peoplepicker-topLevelDisabled, .ms-inputBoxDisabled {background-color:#dddddd !important;}

/*darken background of disabled people pickers*/

.ip-disabled.ip-container {background-color:#dddddd !important;}

/*darken background of disabled MLT fields*/

.nf-form-input div[contenteditable=false] {background-color:#dddddd !important;}

 

Good luck and happy disabling!

NOTE: This solution was implemented on Nintex for SharePoint 2013, so slight adjustments may be required to implement for other platforms. Also, the Custom CSS option is only available in the Classic Forms Designer (not Responsive).

4 Comments
Workflow Hero

Very nice

Workflow Hero

Thanks for sharing, it's really helpful. We are using disable controls rule a lot in our Forms without styling. If I am going to apply this style, it would great for user experience. How do you do the text box control height to be same as people picker control? I would like to make and consistent the control height as second one (update form).

Workflow Hero

Hi Pyae,

This snippet should adjust all controls to be the same height as the PP controls:

.nf-associated-control {height:24px;}

Workflow Hero

Thanks Nicole. Appreciate!