CSS Background color of flex container is not changed in column root container
But, it changes in separate flex container
@nminchin Your support maybe
We can't help if you don't show your code.
- What did you want to happen?
- How did you configure it?
- What did happen?
Those views don't look at all similar. Are they supposed to be the same?
Did you set the linear gradient to the background or the backgroundColor? It should be the first one.
Also, I'd recommend against using a column container due to their pain and frustration in configuring them, and their limited use-case. I'd use a flex with wrapping instead
Your original edit provides more insight into the issue. You're applying the linear gradient to the container rather than to the components of the container
1 Like
I've set the linear gradient to the background
But the case is how to create templates for pass, fail, InProgress with respective colors green, red, yellow which should change in flex.
This is what I tried in flex repeater....as I can change the background color in green but not the text and circle color...
I didn't do any coding. This is label within flex container.
Again, you need to show how you have set this up. The normal procedure is:
- Add a parameter (e.g.,
status) to your view. - Create an expression binding on the component properties. For example, the view
root.props.style.backgroundshould have an expression binding like this:
if({view.params.status},
"linear-gradient(to top, #00bb00, #000000)",
"linear-gradient(to top, #bb0000, #000000)"
)
The passed / failed label should have an expression binding on props.text like this:
if({view.params.status}, "Passed", "Failed")
You should be able to work out the expression bindings for the circular indicator.
Then on your flex repeater you need to add the status parameter under the viewpath and bind that to the variable that contains the status.
1 Like
Thanks this works well, but how about changing the tester name also,
I would like to have the each tester name should change with the respective pass, fail, inprogress text and color
- Create a second parameter for the view. Call it 'testerName` or whatever you like.
- In the repeater view, right-click on the parameters and you should see an option to add parameters.
- Set the parameter to the name you want displayed.
The circle part is not changing it's color, and it's label.props
Flex container props
Circle is alone not changing.
- Delete
textStyle.background. This is setting a separate background on the text. You want it transparent (or not set). - You can't easily set gradients on CSS borders. Remove the gradient and use an expression binding like,
if({view.params.status}, #00bb00, #bb0000))
Look at the result of the binding in the binding editor. If it is blue then it is OK. If it is red then there is an error and you need to fix it.
In this case remove the second ')'.
Hover over the "Error_Configuration" message and post the error message.
- Does
view.params.statusactually exist? - Has it got a value (true / false)?
@nminchin please can you suggest me the way to solve this..
Can you explain me the circular indicator, expression bindings..
You need to surround the hex codes in quotes, those are supposed to be strings.
if ({view.params.status}, '#00bb00', '#bb0000')
You also should try to be more accurate about what you want to do.
As it is, I don't know what you're trying to achieve, and I doubt I'm the only one in this case. This doesn't help your chances.
2 Likes
but the tester name and circle color is not changing, how can I change that?