Skip to Content (Press Enter)
UserImage.jpg
Nuno Pereira
289Views
6Comments
Solved
What is the css class that controls the animated label when the widget is disabled.
Question

Greetings,


I'm trying to change the style of the animated label when the widget is disabled.


The base theme doesn't have a class for that. How can I edit it?


For example we have,


  .animated-label.active .animated-label-text {

            color: blue;

  }


To change the color of the label to blue when the input is selected.


I imagine it would be something like 


  .animated-label.disabled .animated-label-text {

            color: blue;

  }


I tried .disabled, :disabled, .inactive. And nothing works.


Thank you

Nuno Pereira

0
0
16 Apr 2020
Copy Link
2020-03-05 14-29-02
José Costa
Solution

Hi Nuno,

Ok. I see.

Why don't you do everything "inside" OutSystems?

  • define a boolean variable that says if the input is enabled or not.

  • use that variable to set the style of the label.

I've attached an oml with this.

Cheers,

José

See solution in context
AnimatedLabel.oml
1
0
17 Apr 2020
Copy Link
UserImage.jpg
Nuno Pereira

José Costa wrote:

Hi Nuno,

Ok. I see.

Why don't you do everything "inside" OutSystems?

  • define a boolean variable that says if the input is enabled or not.

  • use that variable to set the style of the label.

I've attached an oml with this.

Cheers,

José


Hi José,


Thank you for your advice. It worked.


Regards,

Nuno

0
0
20 Apr 2020
Copy Link
2021-09-10 14-03-53
Salman Ansari

Hi Nuno,


Please check below screen shot.You can change color of textbox for disabled in my example that way


1
0
16 Apr 2020
Copy Link
UserImage.jpg
Nuno Pereira

Salman Ansari wrote:

Hi Nuno,


Please check below screen shot.You can change color of textbox for disabled in my example that way



Hello Salman,


I just want to change the color of the label when the input is disabled. Not the input itself.


Greetings,

Nuno Pereira

0
0
16 Apr 2020
Copy Link
2020-03-05 14-29-02
José Costa

Hi Nuno,

If the label and the input widget are at the same level you can do something like:

input[type="text"]:disabled + <selector to the element that you want to change> {
    color: blue;
}

Is this what you want?

Cheers,

José

1
0
16 Apr 2020
Copy Link
UserImage.jpg
Nuno Pereira

José Costa wrote:

Hi Nuno,

If the label and the input widget are at the same level you can do something like:

input[type="text"]:disabled + <selector to the element that you want to change> {
    color: blue;
}

Is this what you want?

Cheers,

José


Hello José,


I think that doesn't do what I want.

I've created this two inputs.


Both inputs are inside an Animated Label Widget. I've defined the second input as disabled and I would like to change the "Type Label" style.

I've managed to change the style when input is selected.

Thank you in advance,

Nuno Pereira

0
0
16 Apr 2020
Copy Link
2020-03-05 14-29-02
José Costa
Solution

Hi Nuno,

Ok. I see.

Why don't you do everything "inside" OutSystems?

  • define a boolean variable that says if the input is enabled or not.

  • use that variable to set the style of the label.

I've attached an oml with this.

Cheers,

José

AnimatedLabel.oml
1
0
17 Apr 2020
Copy Link
UserImage.jpg
Nuno Pereira

José Costa wrote:

Hi Nuno,

Ok. I see.

Why don't you do everything "inside" OutSystems?

  • define a boolean variable that says if the input is enabled or not.

  • use that variable to set the style of the label.

I've attached an oml with this.

Cheers,

José


Hi José,


Thank you for your advice. It worked.


Regards,

Nuno

0
0
20 Apr 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.