CODEWITHSUNDEEP
javascriptcssreactjs
iamsaksham
iamsaksham

Reputation: 2949

Use CSS/Jquery calc function in React Js

I have a situation where I need to give dynamic width to the div so I need to use this divStyle = {width: calc(100% - 276px)} in my React Js code. But doing so it gives an error that calc is not a function.

I know this can be achieved using Jquery but I dont want to introduce JQuery to my application. If there is any kind of workaround or hack that might solve this then please share.

code:

customFormat = 'hello-div'
divStyle = {width: calc(100% - 276px)}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

Upvotes: 42

Views: 51478

Answers (1)

Majky
Majky

Reputation: 2013

If you need some more specific CSS you need to put it into quotes - react inline styles doc

<div style={{width: 'calc(100% - 276px)'}}></div>

In your exact case

customFormat = 'hello-div'
divStyle = {width: 'calc(100% - 276px)'}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

In case you need to overwrite multiple widths (fallbacks) for browser compatibility

divStyle = {width: 'calc(100% - 276px)',
    fallbacks: [
        { width: '-moz-calc(100% - 276px)' },
        { width: '-webkit-calc(100% - 276px)' },
        { width: '-o-calc(100% - 276px)' }
]}

Upvotes: 78

Related Questions