• Recent
    • Tags
    • Popular
    • Register
    • Login

    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 Mango 5 Documentation Website

    Why this kind of <style> can not work?

    User help
    3
    11
    2.3k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      Zhilin Chen
      last edited by Jared Wiltshire 

      <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>
      1 Reply Last reply Reply Quote 0
      • ThomasEinastoT
        ThomasEinasto
        last edited by Jared Wiltshire

        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

        1 Reply Last reply Reply Quote 1
        • Jared WiltshireJ
          Jared Wiltshire
          last edited by

          Thanks @ThomasEinasto spot on.

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

          Developer at Radix IoT

          1 Reply Last reply Reply Quote 0
          • Z
            Zhilin Chen
            last edited by Zhilin Chen

            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>
            ThomasEinastoT 1 Reply Last reply Reply Quote 0
            • Z
              Zhilin Chen
              last edited by Zhilin Chen

              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>
              1 Reply Last reply Reply Quote 0
              • Z
                Zhilin Chen
                last edited by Zhilin Chen

                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.

                1 Reply Last reply Reply Quote 0
                • ThomasEinastoT
                  ThomasEinasto @Zhilin Chen
                  last edited by

                  @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

}

}

}

}
                  1 Reply Last reply Reply Quote 0
                  • Jared WiltshireJ
                    Jared Wiltshire
                    last edited by Jared Wiltshire

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

                    Developer at Radix IoT

                    ThomasEinastoT 1 Reply Last reply Reply Quote 0
                    • ThomasEinastoT
                      ThomasEinasto @Jared Wiltshire
                      last edited by ThomasEinasto

                      @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>
                      Z 1 Reply Last reply Reply Quote 0
                      • Z
                        Zhilin Chen @ThomasEinasto
                        last edited by

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

                        !important

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

                        Jared WiltshireJ 1 Reply Last reply Reply Quote 0
                        • Jared WiltshireJ
                          Jared Wiltshire @Zhilin Chen
                          last edited by

                          @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

                          Developer at Radix IoT

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post