Currently, I am utilizing the Material-UI library in combination with ReactJS, but facing some challenges pertaining to flexbox.
The objective is to position my Item Container at the center of my div, extending it to occupy the entire available height while also defining margin values for top and bottom.
I attempted using alignItems="stretch" without success as per the original code. Alternatively, setting the heights of both Grid Item and Paper components to 100% seems like a less refined approach to ensuring the element fills all vertical space (second code version).
In addition, when applying a height of 100% to both Grid Item and Paper, along with assigning margin values to each element for top and bottom, the bottom margin gets disregarded by the Paper component entirely. Furthermore, there are occurrences where the width and height surpass the screen size (refer to second image below), causing concern on why this happens.
Original version:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
height: "100%"
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container style={{height: "100%", backgroundColor:"green"}} justify= "center" alignItems="stretch"spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
</Grid>
</div>
);
}
Second version:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
height: "100%"
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
height: "100%",
color: theme.palette.text.secondary,
},
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container style={{height: "100%", backgroundColor:"green"}} justify= "center" alignItems="stretch" spacing={3}>
<Grid item xs={12} style={{backgroundColor: "red", marginTop:10, marginBottom:10}}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
</Grid>
</div>
);
}
Within my index.css file, every component has been set to height="100%".
body {
height: 100%;
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
height: 100%;
width: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
width: 100%;
background-color: indigo;
}
div.app {
height: 100%;
width: 100%;
background-color: cornsilk;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
The desired outcome involves a Grid Item housing a Paper element that is centrally positioned within the Grid container, stretching its height to encompass all vertical space while maintaining specified top and bottom margins.
Results obtained from My Original Code: https://i.stack.imgur.com/uUX65.png
Results achieved from My Second Version Code: https://i.stack.imgur.com/iac9X.png
Inquiry:
Having previously worked with React Native, I find the implementation of flexbox on mobile devices to be more intuitive. Can anyone recommend valuable resources or tutorials that offer comprehensive guidance on managing UI in ReactJS, complete with practical code samples?