Read Only Field background color

asked on May 18, 2022

I have an existing v10 form that I just converted to the new LF v11 designer. The form asks the user for their Employee ID number, performs a lookup to an external table and populates a number of read-only fields (Last Name, First Name, Job Title, Email, etc.)

The Classic designer provided a better differentiation of editable vs. read-only fields (white background for editable vs. grey background for r-o) compared to the Modern designer (black border/white background vs. slightly greyer border/white background for r-o).

I really need to make this differentiation stand out. With such a small difference, I think the user will think a field is available for editing and result in help tickets to our IT group.

I am thinking CSS might be an approach and did find a couple of solutions, but they only work for the Classic designer. Is there a solution for the Modern designer?

0 0

SELECTED ANSWER

replied on May 18, 2022

I'm not very familiar with the new editor yet myself. Mostly because I still need Javascript for so many of my forms, I haven't had much opportunity to play with the new editor.

But, via a quick test of the new editor and reviewing the Inspect Element function in the browser, I was able to get these working:

/*gray background for readonly single line field*/
.cf-field input[readonly] {
    background-color: #EEEEEE!important;
}

/*gray background of readonly multi-line fields*/
.cf-field textarea[readonly] {
    background-color: #EEEEEE!important;
}

/*gray background of readonly drop-down fields*/
.ng-select-disabled .ng-select-container {
    background-color: #EEEEEE!important;
}

1 0

replied on May 19, 2022

This worked! Thank you very much...I will be adding it to all my form conversions and future forms.

1 0

replied on May 19, 2022

Glad to hear it!

0 0

Question

Question

Read Only Field background color

Answer

Replies

Sign in to reply to this post.