Opacity Overrides from Parent to Child Components

Hey Everyone!

I am trying to set up the opacity for parent and child components such that they have an inverse relationship that is dynamic depending upon the state of the data.

So I have a plain container, and in that container I have some text. In one state I want the container itself to have an opacity of 0.2 and the text to be 1.0. However, whatever the parent container is set at seems to override the text so they both end up at 0.2 opacity.

Is there a way around this? Or some other way to achieve the same effect?

Thank you!

Hey User23,
You can do this by using page variables and bounding these variables with Opacity property under the advanced/Style tab.

Hey @Iyad_Helwani … I’m not sure that will solve my problem, unless I’m missing something?

I am already using the Opacity property under the advanced/style tab and to bind the opacity to formulas in order to make them dynamic. I assume this is the same effect a page variable would have?

The issue is more about not having the parent component opacity override the child component opacity. Does your suggested solution achieve this in some way?

Hey user23
If you can add a drafted graph to what exactly you want to achieve, it would be more clear!

Try the test inside another container maybe, and set it over ride in that.

Hey Phil… I had the same idea actually but the result was the same. The outer most container still overrode opacity settings of everything else.

I found a workaround though. I just found a colour code that mimics the opacity effect I was going for and then left all the opacity at 1.