Menu
I want to calculate div height based on the component value by using calc CSS function. The error it gave me:
TypeError: co.calc is not a function
My code:
<div [ngStyle]="{'height': calc(100% - + assetScreenSize + px)}">
</div>
584
asked Aug 02 '17 09:08
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
This is also how you can create aspect-ratio locked divs in HTML since you can calculate height from width using padding-top with a percentage value. A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner.
An, albeit hacky, way to debug calc() is using Developer Tools in your browser. With DevTools open, select the element you want to apply calc() on, and add a CSS property width to it with the calc() expression.
Using the calc() function in inline styles in React #Set the style prop on the element. Pass the result of calling calc() as the value for a CSS property. The call to calc() should be wrapped in a string, e.g. 'calc(100% - 600px)' .
Your syntax is incorrect. The correct way would be:
<div [ngStyle]="{'height': 'calc(100% -' + assetScreenSize + 'px)'}">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
