How to indicate disabled text input with gray text
When a text input is conditionally disabled, I would expect a visual cue to the user that it is disabled. What I am observing is that the text input looks exactly the same, but the user is unable to type in it. Is there a way to make the box and label appear faded/gray? The only solution I see is to make two text inputs with different formats and show/hide each conditionally. Hopefully, there is a cleaner solution.
Example: when a button is disabled, the appearance changes to be faded and it is clear to the user that it is disabled.
Accepted Solution
Updated: 20 Jan 2022 9:05 EST
Infomatics Corp
US
@NascoMan You can write custom css for all the inputs to apply the same format when the input elements are disabled
input[readonly] {
background-color:lightgray;
color: #686868
}
Updated: 19 Jan 2022 15:24 EST
NASCO
US
@Abhilash_K Hi, thank you for the response. This helps, but it is only coloring the input box itself. Is there a way to apply formatting to the text input label? I am playing around with some CSS to see if I can figure it out, but let me know if you have any ideas.
Note: I found that input[disabled] works for specifically disabled elements, rather than all read-only elements.
Infomatics Corp
US
@NascoMan Dom structure for Label and Input element are siblings of the Parent div element. So if you want to differentiate the Disabled Text Label then you have to write the custom jquery script to scan for input[readOnly] elements and find the immediate sibling and make changes dynamically. I dont see any out of the box solution to make the Label looks like disabled format when the input elements are disabled or readonly.
NASCO
US
@Abhilash_K Okay, in that case it seems easier to create two equivalent text inputs with active/disabled styles and show/hide them as appropriate.
NASCO
US
@Abhilash_KOne more thing: the "disabled" display in the demo here is what I am looking for. Is this what it looks like OOTB in Pega 8.6?
Infomatics Corp
US
@NascoMan Yeah this components are in Cosmos Library. Verify the Dom structure if the Cosmos component and Regular Pega 8.6 div generation. if the Label and Input are in the same node then you should be able to achieve it.