Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Changing color of label on list item

Hi
I am displaying a list of items that contains name and temperature in seperate labels on a list item. If the temperature value is below a certain value, I would like to change the color of the temperature label of the specific item. How would I do that.

Thank you.
1 person has
this question
+1
Reply
  • Hello Deon,

    Could you please clarify, what project type do you use there? JQM or Ionic?

    We suggest you to change the color with custom CSS classes, like "below" and "above"
    For the JQM app, please add these classes in the mapping, using JS code.
    Add the mapping arrow from $[i] component to that label:

    $(element).addClass(value.myValue > 100 ? "above" : "below");

    here "myValue" - the name of item's property you need to check the value.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • Thank you for your reply Serhii
    It is JQM.

    However, it does get a bit more complicated than that an my apologies for not explaining the complexity in the first instance.

    I have two temperature thresholds a minimum and maximum threshold.
    Lets assume Temp is 150
    If the Temp goes below 100 then Color must be "below" OR if the Temp exceeds 200 then the color must be "above".

    Would something like this work

    $(element).addClass(value.myValue < 100 ? "below");
    $(element).addClass(value.myValue > 200 ? "above");

    So if neither condition exists, the color will remain as is.

    Thank you
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited