CODEWITHSUNDEEP
csssassgulpcalc
Christian
Christian

Reputation: 47

How to overcome CSS calc() function invalid property value, but when typed in inspector same code does work?

I have the following code in an .scss file:

.device_content_div {
    width: calc(100% – 169px);
    margin-left: 204px;
  }

It gets processed by Gulp. When I open the relevant page in the Chrome inspector it gets an Invalid Property alert.

enter image description here

However, when I type the exact same code, manually in the inspector, there is no alert and the code works as it should.

enter image description here

The same thing goes for Firefox and Safari. I have tried adding it as a insert in the html page itself, and as an 'unprocessed' plain .css file, but the same thing occurs. I have made sure there are spaces between the operator and the numbers, but to no avail. I'm really stuck here.

How can this happen, and how can I fix this?

Upvotes: 2

Views: 2623

Answers (1)

Mihai T
Mihai T

Reputation: 17687

The first one doesn't look like the minus - symbol. It's a bit wider. It's actually an en dash symbol not a minus symbol. Check here -> https://www.babelstone.co.uk/Unicode/whatisit.html and copy/paste the symbol you use and then write the minus - symbol.

They have different unicodes. This – ( the one you use ) is an EN DASH ( you can make it with ALT + 0150 ) and this - is a HYPHEN-MINUS {hyphen or minus sign}.

I guess you copy/pasted the code from somewhere and you accidentally inserted an en dash instead of the minus.

should be calc(100% - 169px) iso calc(100% – 169px) you can see there's a slight difference in the width of the symbol

See example below

div {
  height:50px;
  background: red;
  margin: 10px 0;
}
div.first {
  /* EN DASH */
  width : calc(100% – 169px);
}

div.second {
  /* minus */
  width : calc(100% - 169px);
}
<div class="first">
  Not working ( EN DASH )
</div>
<div class="second">
  Working ( minus )
</div>

Upvotes: 6

Related Questions