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

Question

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.

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

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?

Mihai T · Accepted Answer · 2020-02-19 11:12:26Z

6

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>

edited Feb 19, 2020 at 11:12

answered Feb 19, 2020 at 11:07

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Over a year ago

Very sharp! That was exactly the problem. Replaced the EN DASH with a MINUS and it works like a charm now. Thank you very much :-)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related