How do properly use css's "calc()' with ng-style

Question

I have the following inline-styling using Angular's ng-style and css's "calc()', but it didn't work. Can anyone tell me what's wrong?

// my jade file has a class named '.logo-area'. 
.logo-area(ng-style="{'right':'calc(100% -'+({{fixedWidth}}+'px') +')'}")

Looks like you would need to leave an extra space after the minus sign at least. — Shikkediel, Oct 14 '15 at 20:55
Right. the [MDN](https://developer.mozilla.org/en/docs/Web/CSS/calc) page on calc mentions this specifically: "The operand of `calc(50% -8px)` for instance will be parsed as a percentage followed by a negative length, an invalid expression" — Mr Lister, Oct 14 '15 at 21:04

score 5 · Answer 1 · answered Apr 29 '20 at 09:25

5

This worked for me in HTML with Angular 8

[ngStyle]="{'width': someAngularVariable +'px', 'left': 'calc(100% - ' +someAngularVariable + 'px)' }"

answered Apr 29 '20 at 09:25

Krishna Sagar

score 2 · Answer 2 · edited Oct 17 '16 at 13:34

2

.logo-area(ng-style="{'right': 'calc(50% - '+{{fixedWidth}}+'px'+')'}")

Will solve the problem.

edited Oct 17 '16 at 13:34

gofr1

answered Oct 14 '15 at 21:07

zihaow

You should explain why changing the percentage will solve the problem. – Mr Lister Oct 14 '15 at 21:52
The difference is a removed pair of parentheses. – semiintel Nov 24 '17 at 10:18

2 Answers2