CODEWITHSUNDEEP
csscss-calc
Josh
Josh

Reputation: 664

css calc invalid property value

Can someone tell me why this CSS calc function isn't working? When I inspect element on Chrome, it says 'Invalid property value'.

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

Upvotes: 45

Views: 49001

Answers (6)

cssyphus
cssyphus

Reputation: 40038

For future googlers:

The unhelpful "invalid property value" message in DevTools might just mean that you need white space around your + - / * operators.

Incorrect (invalid property value):

width:calc(100vh-60px)  <== no spaces around minus sign

Correct:

width:calc(100vh - 60px) <== white space around the minus sign

Note the comment below where user2682863 observes that his CSS minifier was removing this necessary whitespace.

The OP's question above does not have this problem, but while googling an answer to this error message this is the first resource I found, so it should have an answer dedicated to this common error.

References:

CSS3 calc(100%-88px) not working in Chrome

https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/

Upvotes: 237

jessewolfe
jessewolfe

Reputation: 380

As @cssyphys noted above, you have to have spaces around your minus sign. However, if you are using ASP.NET MVC's bundler/minifier you find that it removes the spaces so you get the noted error.

If you are using plain CSS3, the following expression can be used in CSS and won't get minified:

width: calc((100%) - 50px);

HOWEVER, if you are using LESS (and perhaps other CSS preprocessors?), the preprocessor will "optimize" your expression and rip out your inner parens, again resulting in something ASP.NET will botch up. To get around that, use LESS's "don't process" tilde expression:

width: calc(~"(100%) - 50px");

I had to go back and change a bunch of calc() statements but so worth it to get back my ASP.NET minification.

Upvotes: 7

bgerth
bgerth

Reputation: 1286

I just came across this error because one SCSS variable was set to zero:

WRONG:

$card-border-width: 0;

This eventually provoked Chrome's message Invalid property value in answer to the CSS result border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0).

RIGHT:

$card-border-width: 0rem;

(giving border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem))

Upvotes: 0

Nesha Zoric
Nesha Zoric

Reputation: 6620

When using calc() you can't divide by pixels, you can only divide by unitless numbers. Also, the number you are dividing has to have a certain unit like px, em, vh, vw.

For example, if you need to set a width of an element you should use:

width: (100px / 2); //this equals to 50px

An important note is to make sure you put spaces between the operator signs. This calc() article provides further detailed explanation on the function.

Upvotes: 6

Andrew Wasson
Andrew Wasson

Reputation: 121

As Stephen Thomas has answered, you can't divide by units. To get around this, just divide the numbers as numbers and then assign the unit of measurement by multiplying the result by 1 unit of the units you're interested in. In your nested scenario you'd need to figure out what unit of measurement you were after in the end so that you could divide the numbers and then assign the result to a px or vw unit of measurement.

Upvotes: 2

Stephen Thomas
Stephen Thomas

Reputation: 14053

You can't divide by units like px, only numbers.

Upvotes: 27

Related Questions