It might be something to do with what css properties are expected to use
calc in the compiler. Not sure...
But in situations like this, I often try to convert the 'value' to a string
which seems to get around some compiler limitations, it might be enough to
get it working for you for now. Maybe try that:
flex: '1 1 calc(50% - 1.5px) !important';
On Thu, Apr 17, 2025 at 8:14 AM Maria Jose Esteve <mjest...@iest.com> wrote:
> 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
>
>
