Question

20

Use CSS/Jquery calc function in React Js

rated 0 times [ 24] [ 4] / answers: 1 / hits: 42840 / 8 Years ago, mon, august 8, 2016, 12:00:00

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>

)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to disable scroll on body when fullscreen menu open

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

View All

answered 8 Years ago claudiofredye · Accepted Answer

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

]}