Leverage the power of CSS and jQuery's calc function within your React.js

Currently, I am facing a situation where I require the div to have a dynamic width in my React JS code. To achieve this, I tried using 

divStyle = {width: calc(100% - 276px)}
, but unfortunately, it resulted in an error stating that calc is not a function.

While I am aware that this can be accomplished using jQuery, I am hesitant to incorporate jQuery into my application. I am seeking any possible workarounds or clever hacks that could potentially resolve this issue.

Here is a snippet of the code:

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

Answer №1

For more specific CSS customization, remember to enclose it in quotes - check out the react inline styles documentation

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

In your specific scenario

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

If you need to override multiple widths for browser compatibility (fallbacks)

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React is throwing an error stating that ref.current.contains is not a valid function

I created a dropdown toggle feature in my React application that is functioning perfectly. However, I encountered an error when I attempted to close the dropdown by clicking outside of the menu. To address this issue, I utilized a reference to locate the ...

reactjstypescriptreact-dom

Alter the background color of the text input when it is selected for exit

How can I adjust the input field color when text is selected? I'm looking to get rid of the dark grey box highlighting. (Check out the image below) https://i.sstatic.net/OgWaz.gif <div id="ember1102" class="ember-view"> <i class="fa fa ...

javascripthtmlcsssass

Updating NPM packages versions is currently restricted

I'm in the process of creating a Next.JS application using create-next-app. However, I've noticed that in the package.json file it lists the following dependencies: "eslint": "8.43.0", "eslint-config-next": &quo ...

javascriptnode.jsnpmnext.js

When an AJAX request is successful in Angular, utilize the ng-hide directive

I've implemented a feature where double-clicking the name displays an input field, but I'm facing an issue with switching back after a successful put-request. Despite setting $scope.edit to false, it doesn't seem to work as expected. This is ...

javascriptajaxangularjs

Fetching dynamic JavaScript generated by PHP

I am creating a lightweight website and I have a piece of javascript code that I want to convert into a module by putting it in a separate file. This way, the code will only be loaded after a specific onClick event occurs. Successfully loading the javascr ...

javascriptphpjqueryajax

Difficulty encountered while attempting to deploy the front-end on Heroku

I recently completed a typeorm project with the following structure: https://i.stack.imgur.com/ReQK1.png Both the client and root directories contain index files located in the src directory. In the package.json file within the client directory, I made a ...

javascriptreactjsherokuweb-deploymenttypeorm

Using a forEach loop within the RequestAnimationFrame function

I am currently developing a project using THREEjs and would like to organize it in the following manner: class Blah scene : new THREE.Scene() renderer : new THREE.WebGLRenderer() camera : new THREE.PerspectiveCamera() ...

javascriptrecursioncoffeescriptthree.js

Enhance the dimensions of images on Tumblr

Is there a way to customize the width of a photo in HTML? I am having trouble changing the size of a photo set on Tumblr to be larger. I have tried researching it, but I don't understand where to place maxwidth:600px or if this is even the correct app ...

htmlimagephototumblrcss

Is the $http call for OPTIONS instead of POST?

Hey there, I'm encountering a strange issue while trying to call my backend using the POST method. Remote Address:192.168.58.183:80 Request URL:http://192.168.58.183/ESService/ESService.svc/CreateNewAccount Request Method:OPTIONS Status Code:405 Meth ...

javascriptangularjshttpionic-framework

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

javascripthtmlnode.js

center menu items will be displayed as a fallback in case flexbox is unavailable

The code I have creates space between menu items and centers them both horizontally and vertically within each item. This is achieved by using a wrapper for the menu items: .gel-layout { list-style: none; direction: ltr; text-align: left; ...

htmlcss

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

javascriptangular

In the realm of JavaScript, removing a DOM element can sometimes feel like an

For my project, I am using JavaScript, DOM, and AJAX to create pages. I am trying to figure out how to check if an element already exists and, if it does, remove it. This is what I have tried: var elementL = document.getElementById('divLogin'); ...

javascriptjqueryajaxdom

Using JavaScript or TypeScript to locate the key and add the value to an array

My dilemma involves an object structured as follows: [{ Date: 01/11/2022, Questionnaire: [ {Title: 'Rating', Ans: '5' }, {Title: 'Comment', Ans: 'Awesome' } ] }, { Date: 01/11/2022, Questionnaire ...

javascriptarraystypescriptobjectarraylist

Is there a way for me to update the placeholder text in my script from "CHANGE ME

Can anyone help me troubleshoot this code that's not working on my computer? I have a paragraph with the text CHANGE ME inside an element with the id "warning". I want to update this text when the login button is clicked, but it doesn't seem to ...

javascripthtml

Guide to showcasing associated information in HTML using Angular 7

I am a beginner with Angular 7 and I am attempting to showcase a product's color on the HTML side using Angular 7 but have not been successful. Below are my tables; Product Id Name Color Id Name ProductColorRelation Id ProductId ColorId In ...

javascripthtmlangular

Tips for fixing the error 'deletePerson is not defined' in a react js onClick event

This is the AppComponent, which serves as the container component for functions: import React, { Component } from 'react'; import './App.css'; import MainComponent from './MainComponent/MainComponent'; import AddPerson from ...

reactjsreact-reduxjsx

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

The issue with Bootstrap 4 modal not closing persists when loading content using the .load() function

Having an issue with my Bootstrap 4 modal, as I'm loading the body content externally using .load(), but it's not closing when I click on the close buttons. Any help would be highly welcomed. JavaScript Code Used: if(status){ $('#cartMe ...

javascriptjqueryajaxtwitter-bootstrap

Achieving a sleek line effect with a gradient border

Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...

cssgradientlinear-gradients