Use CSS/Jquery calc function in React Js

Question

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>
)

divStyle should be a string. divStyle = '{width: calc(100% - 276px)}' — Roysh
– Roysh, Commented Aug 8, 2016 at 7:56

WayneJohn · Accepted Answer · 2018-10-30 10:34:11Z

78

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)' }
]}

edited Oct 30, 2018 at 10:34

WayneJohn

757 bronze badges

answered Aug 8, 2016 at 7:56

Majky

2,0131 gold badge20 silver badges30 bronze badges

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

1 Comment

ShortArrow Over a year ago

The space on both sides of the minus sign is important

Collectives™ on Stack Overflow

Use CSS/Jquery calc function in React Js

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