CSS based on element value in list

[marcelhavlik]

Hello, I have already checked many threads with this topic but I am not successful. I would like to have all negative values in red color and do not want to update default_row.php., Is there any easier way how to format these values? Use as row class is also not applicable to my case, because based on my understanding, this is only for specific values. Thank you

 

[Sophist]

If you want to colour the entire row if an element has a negative value, then "Use as row class" could work. Create a calc value which has the row class you want if the field is negative and use that.

 

[marcelhavlik]

I would like to have only the negative value in red color - not whole row. Do I need calc element? Field element has also Use as row class option.

 

[Sophist]

No - the Use as Row Class means that the value of the element is added as an HTML class to the <tr> tag. So if the element is a field i.e. an input field, you could type "classRed" and you would get <tr class="classRed"> when you displayed the list. Similarly if it was a calc element, then the calculated value would be added as a class.

I suppose you could have CSS like:

tr.classRed td.elementName {background-color: red}

which would then apply the colour only to a single element.

If you had several fields, then you could have a calc which created a value colourRedX where X is a number calculated as the sum of 1 for the first element red, 2 for the second, 4 for the third etc. and then you could have css as follows:

tr.classRed1 td.elementName1,
tr.classRed3 td.elementName1,
tr.classRed5 td.elementName1,
tr.classRed7 td.elementName1,
tr.classRed2 td.elementName2,
tr.classRed3 td.elementName2,
tr.classRed6 td.elementName2,
tr.classRed7 td.elementName2,
tr.classRed4 td.elementName3,
tr.classRed5 td.elementName3,
tr.classRed6 td.elementName3,
tr.classRed7 td.elementName3
{
    background-color: red
}

So, yes, I think it is possible to do this using a calc field with Use as Row Class.

 

[marcelhavlik]

Really appreciate your help, but where is the condition? There must something like if value contains "-" or if value<0 then use classRed

 

[cheesegrits]

There is no concept of conditionals in CSS.

So you have two choices. Which one to use depends on your range of values.

If you have a very restricted set of expected values, like between -5 and +5, then you could potentials create a class for each possible value of the row class (yourelement-5 through yourelement5) and create the targetted selector for each ...

tr.yourelement-5 td.yourtable___yourelement {
background-color: red;
}

... etc.

But if your range of values is large (like decimals in a huge range) which precludes having a set list of classes, then the way to go would be to have a calc element (hidden, and not displayed in the list) which does something like ...

return '{yourtable___yourelement}' < 0 ? 'NegativeClassName' : 'PositiveClassName';

So for negative values, your row would have a class of yourcalcNegativeClassName, so then you just need one CSS ...

tr.yourcalcNegativeClassName td.yourtable___yourelement {
background-color: red;
}

Note the use of the descendent selector, to target td's with class yourtable___yourelement, which are descendents of tr's with class yourcalcNegativeClassName.

-- hugh

 

[marcelhavlik]

Guys, thank you for your help! Really appreciate your help