I have two fields: Field A and Field B. If I enter anything in Field A, I want Field B to get disabled and turn grey, and vice versa. I am able to disable it, but the input widget is still showing as white in color not grey, even after it is disabled. How can I grey it out?
Hi,
Do you have any custom CSS on your input fields? input widget when used have class "form-control" added, and if the input is disabled it has the grey background.
I'm using form-control already but the color stays the same.
Inspect in browser on disabled input and check the CSS. there must be some CSS over-riding it.
I checked CSS, the color its showing is grey, even if its disabled or enabled, I want it to be white when its enabled & grey when its disabled. could you pls help in how to remove this background-color: #eceff1 in Service studio?
You mentioned you are using default input CSS class, but from your screenshot looks like you have some other class defined
In service studio ,default input style class-
If you can share screenshots from Service Studio to see applied style class or if possible to share OML to have a better look.
Actually this .card class's background color is overriding other back ground color values, which is why its only showing as grey everytime, is there any way i can stop this from overriding?
Is your input enclosed in any container or any other widget ?
I can just suggest that, inspect over the enabled input element , check the class which is being used to show white background color, then inspect over the disabled input and check the class .
To override CSS, you can use !important. Add it in the screen style sheet editor. With given below example now my input background will be black for the disabled input (default was grey but now overriding to black)
Yes, its enclosed in a container. One question I had, if data is empty & I want the input widget to display white, so if I add !important in front of the background color, wouldn't it still display as white when its disabled as the disabled background color will be overwritten or will it not get overwritten?
Hi Aarushi,
If you can attach the OML file, that would help to understand better and suggest solution accordingly. If its confidential , then you can extract the part of logic into separate OML and share.
Hello Aarushi Bhalla, Are you using the default theme/CSS style from OS for inputs?
This is the link for the Style Guide of OS. Here you can see that if you are using the default it comes straightforward:
Anyway, check the classes using the inspect and you will be able to see which ones are changing and missing in your implementation.
Best regards,
Ana
Hello @Aarushi
You need to check the Enable property of the input and make it enable and disable through boolean variable
I have created a sample for you hope that might help you with this:
Sample: https://personal-ejuytnht.outsystemscloud.com/SampleForumPOCS/SampleInputDisabled?_ts=638253038099204481
ThanksTousif Khan
What is the point of giving a dislike here?
I would not give it a downvote, myself, but i have some remarks, maybe it is because of one of these :
Gottcha! Thanks, @Dorine for the feedback, Also If more information is added to the post with some snapshot, or if it should be mentioned that it is related to CSS that would help to understand the scenario.
Hi Aarushi Bhalla,
This happens due to specificity issues in the input field. so, you can achieve that by using !important Property.
I have attached the URL and OML for your reference,
URL : https://personal-7tgejs7g.outsystemscloud.com/InputDisable/Screen2?_ts=638253750394049026