1. If you update to Joomla 3.8.10, please make sure that you either do a full GitHub update of Fabrik, or disable caching for your lists (in the Advanced settings) or turn off Joomla's System Cache setting. A change in Joomla's cache code in 3.8.10 required a fix in Fabrik, which will be rolled in to the next release, but is currently only available in GitHub.
    Dismiss Notice
  2. We will be performing an update of XenForo (the forum software use on this site) this afternoon, Fri 8/17/2018. The forums will be unavailable for a (hopefully!) short time.
    Dismiss Notice

CSS based on element value in list

Discussion in 'Standard Support' started by marcelhavlik, Mar 13, 2018.

Thread Status:
Not open for further replies.
  1. marcelhavlik

    marcelhavlik Member

    Level: Standard
    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
     
  2. Sophist

    Sophist Well-Known Member

    Level: Community
    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.
     
  3. marcelhavlik

    marcelhavlik Member

    Level: Standard
    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.
     
  4. Sophist

    Sophist Well-Known Member

    Level: Community
    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:
    Code (Text):
    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:
    Code (Text):
    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.
     
  5. marcelhavlik

    marcelhavlik Member

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

    cheesegrits Support Gopher Staff Member

    Level: Professional
    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 ...

    Code (Text):

    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
     
  7. marcelhavlik

    marcelhavlik Member

    Level: Standard
    Guys, thank you for your help! Really appreciate your help
     
Thread Status:
Not open for further replies.

Share This Page