Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Why this kind of <style> can not work?


  • <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
      <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
        <div ma-selector="#t1" ng-class="{'grey-fill': 1, 'red-fill': 0, 'blue-fill': 0, 'green-fill': 0}"></div>
    </ma-svg>
    </div>
    
    <style>
    .grey-fill {
      fill: grey;
    }
    .red-fill {
      fill: red;
    }
    .blue-fill {
      fill: blue;
    }
    .green-fill {
      fill: green;
    }
    </style>
    

  • This is because you have no variable assigned to ng-class and currently you probably have multiple same conditions on multiple classes. i.e 'red-fill', 'blue-fill and 'green-fill' are assigned currently as 0?.

    Correct way would be something like this:

    <style>
    .grey-fill {
    fill: grey;
    }
    .red-fill {
    fill: red;
    }
    .blue-fill {
    fill: blue;
    }
    .green-fill {
    fill: green;
    }
    </style>
    
    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'grey-fill': point.value == 1, 'red-fill': point.value == 2, 'blue-fill': point.value == 3, 'green-fill': point.value == 4}"></div>
    </ma-svg>
    </div>
    

    See /ui/examples/basics/style-via-value for a correct example on how to use ng-class or https://docs.angularjs.org/api/ng/directive/ngClass


  • Thanks @ThomasEinasto spot on.

    @Zhilin-Chen also make sure you close your div tag. I edited your question.


  • Hi, Thomas and Jared

    Thank you so much!! You guys are so quick! However, That is not what I mean. What I mean is that the style statement still does not work with your code. Other kinds of style such as something with animation could work with this condition. But this colour-fill one could not. Quite confusing though. Sorry still new in Mango.

    eg. below

    <div class="ma-designer-root" id="a7f018fd-f4bf-469e-bec7-1282ad4606bc" style="width: 1366px; height: 768px; position: relative;"></div>
    <style>
    .grey-fill {
    fill: grey;
    }
    .red-fill {
    fill: red;
    }
    .blue-fill {
    fill: blue;
    }
    .green-fill {
    fill: green;
    }
    </style>
    
    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'grey-fill': (v342.value < 0.94) || (v342.value > 1.06), 'red-fill':(v342.value >= 0.94 &amp;&amp; v342.value < 0.95) , 'blue-fill': (v342.value <= 1.06 &amp;&amp; v342.value > 1.05), 'green-fill': (v342.value >= 0.95) &amp;&amp; (v342.value <= 1.05)}">
    </div>
    </ma-svg>
    <ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
    </div>

  • But something like this will works.

    <div class="ma-designer-root" id="a7f018fd-f4bf-469e-bec7-1282ad4606bc" style="width: 1366px; height: 768px; position: relative;"></div>
    <style>
    @keyframes flash-warning {
    0%, 25% {fill: blue}
    30%, 40% {fill: orange}
    45%, 55% {fill: blue}
    60%, 70% {fill: orange}
    75%, 100% {fill: blue}
    }
    @keyframes flash-critical {
    0%, 25% {fill: blue}
    30%, 40% {fill: red}
    45%, 55% {fill: blue}
    60%, 70% {fill: red}
    75%, 100% {fill: blue}
    }
    @keyframes flash-normal {
    /10%, 100% {fill: black}/
    0%, 25% {fill: blue}
    30%, 40% {fill: lime}
    45%, 55% {fill: blue}
    60%, 70% {fill: lime}
    75%, 100% {fill: blue}
    }
    @keyframes flash-off {
    10%, 100% {fill: blue}
    }
    .flash-warning {
    animation: flash-warning 2s linear 1s infinite;
    }
    .flash-critical {
    animation: flash-critical 2s linear 1s infinite;
    }
    .flash-off {
    animation: flash-off 1s linear 0s forwards;
    /animation: flash-normal 2s linear 1s infinite;/
    }
    </style>
    
    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'flash-warning': (v342.value < 0.94) || (v342.value > 1.06), 'flash-critical':(v342.value >= 0.94 && v342.value < 0.95) , 'flash-critical': (v342.value <= 1.06 && v342.value > 1.05), 'flash-off': (v342.value >= 0.95) && (v342.value <= 1.05)}"></div>
    
    </ma-svg>
    <ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
    </div>

  • So I conclude there is something wrong with the style of colour fill. But don't know why.

    All I want to achieve is just changing the colour of the element in SVG pic due to the range of data.


  • @zhilin-chen said in Why this kind of <style> can not work?:

    Hi, Thomas and Jared

    Thank you so much!! You guys are so quick! However, That is not what I mean. What I mean is that the style statement still does not work with your code. Other kinds of style such as something with animation could work with this condition. But this colour-fill one could not. Quite confusing though. Sorry still new in Mango.

    eg. below

    <div class="ma-designer-root" id="a7f018fd-f4bf-469e-bec7-1282ad4606bc" style="width: 1366px; height: 768px; position: relative;"></div>
    <style>
    .grey-fill {
    fill: grey;
    }
    .red-fill {
    fill: red;
    }
    .blue-fill {
    fill: blue;
    }
    .green-fill {
    fill: green;
    }
    </style>
    
    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'grey-fill': (v342.value < 0.94) || (v342.value > 1.06), 'red-fill':(v342.value >= 0.94 &amp;&amp; v342.value < 0.95) , 'blue-fill': (v342.value <= 1.06 &amp;&amp; v342.value > 1.05), 'green-fill': (v342.value >= 0.95) &amp;&amp; (v342.value <= 1.05)}">
    </div>
    </ma-svg>
    <ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
    </div>
    

    Actually I tested my code out and you are right that ng-class fails but ng-style does not.

    One way you could achieve your result is following:

    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    
    <div ma-selector="#t1" 
    ng-style="{'fill': (v342.value < 0.94) || (v342.value > 1.06) ? 'gray' : (v342.value >= 0.94 && v342.value < 0.95) ? 'red' : (v342.value <= 1.06 && v342.value > 1.05) ? 'blue' : (v342.value >= 0.95) && (v342.value <= 1.05) ? 'green' : 'default' }"
    >
    </div>
    </ma-svg>
    <ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
    </div>
    

    This is ng-style which is the same equivalent as:

    if (condition1){
    
    fill:gray
    
    }else{
    
    if (condition3){
    
    fill:red
    
    }else{
    
    if (condition3){
    
    fill:blue
    
    }else{
    
    if (condition4){
    
    fill:green
    
    }else{
    
    fill:default
    
    }
    
    }
    
    }
    
    }
    

  • @Zhilin-Chen
    Open up the Chrome debugger (Right click, inspect element) and confirm that

    • The classes are being applied to the element(s) you are trying to target
    • The styles from the class are not being overridden by a higher priority rule or inline style

    e.g.
    0_1576518961213_32f879dd-13cd-44af-ac68-bec2c3e28755-image.png

    If a style has been overridden you will see it in the list on the right but it will be struck out.


  • @jared-wiltshire said in Why this kind of <style> can not work?:

    @Zhilin-Chen
    Open up the Chrome debugger (Right click, inspect element) and confirm that

    • The classes are being applied to the element(s) you are trying to target
    • The styles from the class are not being overridden by a higher priority rule or inline style

    @Jared-Wiltshire So basically adding !important to style solves it right?

    @Zhilin-Chen, Following solves this by @Jared-Wiltshire explanations.

    <style>
    .grey-fill {
    fill: grey !important;
    }
    .red-fill {
    fill: red  !important;
    }
    .blue-fill {
    fill: blue  !important;
    }
    .green-fill {
    fill: green  !important;
    }
    </style>
    
    <div class="ma-designer-root" id="445b6000b-362e-407f-aa27-05545fea5884" style="width: inherit; height: inherit; position: relative; bottom: inherit; left: inherit;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/sss/demo.svg'">
    <div ma-selector="#t1" ng-class="{'grey-fill': (v342.value < 0.94) || (v342.value > 1.06), 'red-fill':(v342.value >= 0.94 &amp;&amp; v342.value < 0.95) , 'blue-fill': (v342.value <= 1.06 &amp;&amp; v342.value > 1.05), 'green-fill': (v342.value >= 0.95) &amp;&amp; (v342.value <= 1.05)}">
    </div>
    </ma-svg>
    <ma-get-point-value point-xid="demo1" point="v342"></ma-get-point-value>
    </div>
    

  • @thomaseinasto said in Why this kind of <style> can not work?:

    !important

    Yes!! It finally works!!! Thank you so much!!


  • @zhilin-chen said in Why this kind of <style> can not work?:

    @thomaseinasto said in Why this kind of <style> can not work?:

    !important

    Yes!! It finally works!!! Thank you so much!!

    Be careful using !important everywhere, it makes it hard to override elsewhere. Follow my instructions above and read this article -
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity