Why this kind of <style> can not work?

[ThomasEinasto]

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

[Jared Wiltshire]

Thanks @ThomasEinasto spot on.

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

[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>

[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>

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

[ThomasEinasto]

@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

}

}

}

}

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

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

[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>

[Zhilin Chen]

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

!important

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

[Jared Wiltshire]

@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