Leveraging calc() in Material UI

Goal:

The aim is to design two divs positioned side by side on a webpage, covering the entire width of the page. This should be achieved using the latest versions of react + Material UI.

The div on the left should have a fixed width of 200px.

While the div on the right should occupy the remaining space on the page.

In CSS, the width of the right div could be calculated dynamically using calc(100% - 200px).

Issue Encountered:

I faced difficulty implementing this in Material UI. I attempted inline styling ( style={{width='calc(100%-200)'}}), which compiles but does not yield the desired result. I also experimented with makeStyles(), but to no success.

Your valuable assistance in resolving this matter is greatly appreciated.

cssreactjsmaterial-ui

Answer №1

If you're wondering how to implement this using the makeStyles() function:

const styles = makeStyles({
  width: 'calc(100% - 200px)'
});

Alternatively, if the pixel value is dynamically determined in the JavaScript code:

const dynamicWidth = getDynamicValue(); // returns '200'

const styles = makeStyles({
  width: `calc(100% - ${dynamicWidth}px)`
});

As mentioned in dlewiski's answer, the key point is to ensure there are spaces surrounding the operator and to include the px unit.

I've personally been guilty of forgetting to add spaces around the operator within the calc() function.

Answer №2

One thing that stands out to me is the lack of spacing between the '-' and the absence of 'px' after 200.

Currently, you have style={{width='calc(100%-200)'}}

It should be 

style={{width='calc(100% - 200px)'}}

Although this correction was mentioned in the original response, I wanted to provide further clarification on the specific issues at hand.

Answer №3

If your code is no longer functioning properly in the latest version of MUI v5, it may be due to the usage of theme.spacing() which has undergone a breaking change in this update. According to the migration guide:

theme.spacing now returns single values with px units by default.

Correct code for:

V5

width: `calc(100vw - ${theme.spacing(3)})`

V4

width: `calc(100vw - ${theme.spacing(3)}px)`

Live Example

https://codesandbox.io/s/59569174-using-calc-in-material-ui-6wvxy?file=/demo.tsx

Answer №4

When working with style as an object, avoid using =.

Here's the correct way to approach it:

style={{width: 'calc(100% - 200px)'}}

If the style is not being applied, you can try:

style={{width: 'calc(100% - 200px) !important'}}

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

What is the integration process of using Font Awesome with React?

After installing react-create-app using npm, I also added react-fontawesome. Now, I'm wondering how to include the css styles of fontawesome in my project? Here is a glimpse of my work space: https://i.stack.imgur.com/pM1g1.png ...

javascriptreactjsnpmfont-awesomejsx

Harnessing the power of VUE.js: Exploring the versatility of V-bind with Array and

I've encountered an issue with an app I'm currently working on. In my project, I am utilizing Vue.js to create the front-end and attempting to apply two classes to a div within a v-for loop. The first class is bound with a filter that functions ...

javascriptcssclassvue.js

Centering headings and form elements in Bootstrap

I have a bootstrap row with a heading and an input field. Here is my code: <div class="row mb-5"> <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="for ...

htmlcssbootstrap-5

What is the best way to display the user login in the center of a page with all necessary controls

Challenge How can the user login be displayed in the center of the page? Additional Information The current layout displays user login data on the left-hand side. I am looking to have the user login data centralized on the page, which includes labels f ...

csshtmlasp.net-mvc-4bootstrap-4bootstrap-ui

What are the main differences between Fluid Layout and Grid?

It seems like there's some vital information I haven't come across yet. Are fluid layouts and grid layouts interchangeable? I keep hearing about this baseline concept, but I can't quite grasp its purpose. Does it serve as a guide for alignin ...

htmlcssfluid-layoutgrid-layoutbaseline

Navigating to a specific route using React-Router through the root component

How can I implement a search functionality in my application where the navbar's textbox is used to navigate to the search results page no matter the route, such as / or /listing/foo? The issue I am facing is that the conventional method of programmati ...

javascriptreactjsreact-router

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Creating a color gradient for hyperlinked text when hovered over: a tutorial

How can I achieve this effect using CSS only? I want the link color to change from #00C to #000 when hovered over, with a gradient transition taking 1 second. ...

csshover

Adjusting the page width to ensure compatibility with all devices

I am facing difficulties with CSS regarding the properties width and margin. I am developing a webpage that should display properly on all devices, including PCs, smartphones, and tablets. I am using HTML <meta name="viewport" content="width=device-widt ...

htmlcssmarginpixel

Tips for organizing your JSON Structure within ReactJs

In the given example, I have a JSON structure with information about different airlines. The Airline Name is dynamic and we need to separate the JSON into an expected array format. const arr = [ { Airline: "Goair", Departure: "01:50" ...

javascriptarraysreactjs

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

javascriptcssangularjsvalidationpasswords

The presence of <!--[if lte IE8]>< ![endif]--> on the website is causing problems with the dropdown

Check out my link: Problem #1: Why does "" appear on the site in Internet Explorer? The markup seems correct, so what is causing this to show up? Problem #2: In Internet Explorer, there is an issue with clicking on subnav items above the jQuery slider wh ...

phphtmlcss

CSS Flexibility in Action

Presently, my tab bar has a fixed look as shown here: https://codepen.io/cdemez/pen/WNrQpWp Including properties like width: 400px; etc... Upon inspecting the code, you'll notice that all the dimensions are static :-( Consequently, I am encountering ...

javascripthtmlcss

What is the correct way to utilize drei's useGLTF function?

Despite following the react-three docs and various examples, I am struggling to get drei useGLTF to function properly in my project. I have a basic Next|React|react-three/fiber project that I built from scratch. My goal is to load the astronaut example an ...

reactjsthree.jsnext.jsreact-three-fiberreact-three-drei

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

javascriptjqueryhtmlcss

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

The useEffect function is not being executed

Seeking assistance from anyone willing to help. Thank you in advance. While working on a project, I encountered an issue. My useEffect function is not being called as expected. Despite trying different dependencies, I have been unable to resolve the issue ...

javascriptreactjsuse-effect

Can an image be resized to fill either the full height or width based on its orientation?

Looking to display a dynamic list of images with varying sizes and orientations - some landscape, some portrait. The challenge is that the landscape images should fill 100% width of their parent container, while the portrait images should fill 100% height ...

htmlcss

What is the best way to assign the selected attribute to my mat-option element?

I am encountering an issue with my mat-select and mat-option control. I am trying to apply the selected attribute to the first mat-option control without using binding on [(ngModel)] or [(value)]. The mat-option control is being generated by the *ngFor d ...

angulartypescriptangular-materialmaterial-ui

The error of "Uncaught ReferenceError" is being triggered by the use of `process?.env?

A bug was discovered in our front-end code related to the following snippet: <span style={{ color: 'red' }}>{process?.env?.REACT_APP_HEADER_SUFFIX ?? ''}</span> The bug triggered the following error message: Uncaught Refere ...

javascriptnode.jsreactjs