Change in color of element in block not affecting parent
Application Type
Reactive

Hey i have created a registration page where i have numbered each page with variable screenid. Totally there are 4 screens. Now i have created an input parameter in my block where i will take the screen id and assign it to a local variable called value and make a check to change the color of the element. I've added style classes to change to color of the element in the block. The problem is the result is not reflecting in the parent screen. I've even added the onParam event for the block. Can anyone please help. 


MetitoApp.oml

Solution

That's probably because the background-color value is being overwritten by another class. Can you show the values displayed when you inspect the code?

Hi Akash,

a CSS style in a block have a lower priority than inline style, screen css (parent) and theme. The style you want to apply is probably overwritten by another style from the screen or theme.

To fix it you can create that class in the screen or theme (if you want it global) and the block should apply it correctly.

Regards

The style class is present at the theme level right over here? or is it app level? I have that style class specific to that particular block. There is no other style classes added to the app. 

You can Inspect the code to see which class is being applied to the block.


The classes seem to change properly but the color isn't changing idk why. Could you please help me

Solution

That's probably because the background-color value is being overwritten by another class. Can you show the values displayed when you inspect the code?

You are right. How do i change the inline styles back to default? I am fairly new to front end in Outsystems.


Thank you I've solved it. 

I simply removed the inline styling of those elements. Idk how it was added


Hi Akash,

Since each step goes to a new screen, the OnParameterChanged is never triggered. Just use parameter ScreenId directly in the if-statement in the Style Class expression and it will work.

It works only for screen 2. I encounter a logical error, where the color is not changing if i go to screen 3 and screen 4, eventhough the class changes. Could you please help.

I guess that's now also solved by removing the inline styling as you mentioned in the other thread?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.