• 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.5k
    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.
    • 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