I'm a little confused because I've been using the "calc" function in my *.css
files (used via classname) and "style" properties for a while now, and
everything works fine. Now, I've created an ItemRenderer in which I use classes
like this:
.hours-label {
flex: 1 1 calc(50% - 1.5px) !important; /* I have tried separating the flex
property into each of the grouped properties: flex-basis, flex-grow, etc. but
the result is the same. */
min-width: 50px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}
The application compiles correctly but in App.js a block like this has been
inserted (marking an error):
...
".hours-label",
function() {this["boxSizing"] = "border-box";
this["flex"] = [1.0, 1.0, unexpected value type: calc(50% - 1.5px),
"!important"];
this["minWidth"] = 50.0;
this["padding"] = 0.0;
this["textAlign"] = "center"},
0,
...
It can't be a general problem when interpreting the "calc" function because I
use it in many other places, for example "in the same ITemRenderer":
[1] <wp:LabelJwExt truncate="true" text="{!getReg?'':getReg.observaciones}"
style="width:calc(100% - 37px);">
I was telling you I'm confused because in App.js I don't find any references to
other CSS classes where I use "calc()", nor do I see anything about [1]
What are we including in App.js? Why is there no reference to any of the other
CSS classes I use in the app that also use "calc()", but there is a reference
to ".hours-label"?
Any help would be appreciated.
Thx.
Hiedra
