Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks like this:

<Grid container direction={column}>
    <Grid item>1</Grid>
    <Grid item>2</Grid>
</Grid>

I have attempted to set the first grid item to a height of 20% and the second one to 80%, but it is not producing the desired outcome. Can someone provide guidance on how to adjust the CSS in order to achieve the desired result?

https://i.sstatic.net/e2R2f.png

htmlcssmaterial-uigrid

Answer №1

If you're looking to achieve the same effect as shown in the picture, consider using `vh` instead of `%`. You can read more about viewport-percentage lengths here. Here's an example:

<Grid container direction={"column"}>
    <Grid item className={classes.item20}>
      1
    </Grid>
    <Grid item className={classes.item80}>
      2
    </Grid>
</Grid>

The CSS style for it would be:

item20: {
  height: "20vh",
},
item80: {
  height: "80vh",
}

Check out a working example here.

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 method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this: <div id="left"> <div id="menus" runat="server"> <div id="left_menu"> <div class="abc"> < ...

asp.netcss

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

"How to change the hover background of a select element in Chrome from its default setting to something else

https://i.sstatic.net/G2deM.png Is there a way to remove the background color on hover and replace it with a different color? .drp-policydetails { border: 1px solid #dddddd; background-color: #ffffff; } <div className="form-group"> <sele ...

javascripthtmlreactjscss

Is there a way to customize the color of the open date picker button?

import React from 'react' import { DesktopDatePicker } from '@mui/x-date-pickers'; function DatePicker() { return ( <DesktopDatePicker slotProps={{ textField: { variant: &a ...

material-ui

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

javascriptcssbootstrap-5bootstrap-accordion

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

htmlcssreactjs

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

Failed to load CSS file in nodeJS application

I followed a tutorial to create a backend app using nodeJS and Express. My MongoDB connection with Mongoose is working fine. However, I am facing issues when trying to add a simple front-end using html/ejs/css. The endpoints are loading on localhost but on ...

javascripthtmlcssnode.jsexpress

Optimizing Midnight UTC+0 Setting in JavaScript Date Functions

I am using an MUI Datepicker that allows me to choose a day without specifying the time. For example, if I select 01.09.1970, in the console log it displays as Tue Sep 01 1970 00:00:00 GMT+0100 (Central European Standard Time). This indicates that even tho ...

javascriptasp.net-corematerial-uiglobalization

Is there a way to detect when the mobile keyboard is open in a React application?

I am currently working with a Textfield that includes the Autofocus attribute. I am wondering if there is a method to detect when the keyboard opens in mobile view and then store this information in a boolean variable. https://i.stack.imgur.com/z0EtB.png ...

javascriptreactjsmaterial-ui

What is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

javascripthtmlcssangularjsgsap

Using jQuery with AJAX to transfer data and store it within PHP

Hello! I am looking for assistance in sending or retrieving data from a form using jQuery and AJAX to transfer the data to a PHP page for database storage. Any guidance on how to achieve this using jQuery and AJAX would be greatly appreciated. Thank you! ...

phpjqueryhtmlajax

How can I convert the stylesheet link from fonts.google.com into a CSS class and include it in my file.css as an internal style instead of an external one?

Looking to incorporate a font from fonts.google.com? Here's how you can do it: <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300 ...

windows-10fontshtmlcss

Issue with Jquery functionality on IE9 Release Candidate

Recently, I made the switch to IE9 RC (which, in my opinion, is not too shabby for a Microsoft product so far - though there's still time for them to mess it up! Please refrain from starting a browser war in the comments section by sharing your though ...

jqueryhtmlinternet-explorer-9

Tips for making a hide and reveal FAQ section

Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality p ...

javascriptjqueryhtmlcss

The Javascript Image() function fails to load or render

I am currently in the process of developing a basic Sprite class for implementation in a canvas game. However, I am encountering an issue where the image specified during the creation of a new instance of the class does not trigger the onload or onerror ev ...

javascripthtmlimagecanvasonload

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...

jqueryhtmlcss

Rendering EJS templates and smoothly scrolling to a specific section on a webpage

I need to display my index page and automatically scroll down to the form section. One way I thought of doing this is by: app.post('/rsvp', (req, res) => { res.render('index/#rsvp', { errors: { email: 'Your email has already ...

htmlnode.jsexpressejs

Utilize jQuery to serialize the HTML input elements that are dynamically generated outside of the form

A proof of concept is in progress for an application that involves the generation of HTML elements based on user-configured fields. Here is a sample configuration: // Customer SAM $response = array( array ( NAME => CUSTOMER, TYPE = ...

javascriptphpjqueryhtml

Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over. To achieve this, I added a simple popover component to the last cell of ...

htmlcssreactjshtml-tablematerial-ui