I have the following material UI grid code (copied from their documentation and adjusted to show the problem I'm having):
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,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
tall: {
height: 400,
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>
<Grid item container xs={4}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.tall}>xs=6</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
<Grid item container xs={8}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
</Grid>
</div>
);
}
The issue I am having is that it is adjusting the height of the second column based on the first column, as you can see in the image below. I'd like the xs=6 tiles in the second column to be directly stacked one on top of the other. How do I do this?
adding to the highest grid container: alignItems="baseline" seems to have done the trick
Related
I'm pretty new to Material-UI and I would like to have this basic implementation with Grid components:
But so far I'm unable to center the Grid items correctly. I tried different approaches but none of them worked. This is my code so far:
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column">
<Grid item xs={11}>
Some text
</Grid>
<Grid item xs={11}>
Some text
</Grid>
</Grid>
</Grid>
Thanks in advance for any help.
You need to use some more of the Material UI components to achieve your goal. You need to use the Paper and Typography components and the makeStyles function. I set up a demo here and the code should look something like this:
import "./styles.css";
import Grid from "#material-ui/core/Grid";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Paper from "#material-ui/core/Paper";
import Typography from "#material-ui/core/Typography";
import { makeStyles } from "#material-ui/core/styles";
// Set your styles for the paper component here:
const paperStyles = makeStyles((theme) => ({
root: {
margin: "15px",
height: "150px",
padding: "20px",
backgroundColor: "#cfcfcf"
}
}));
export default function App() {
// Call your styles function:
const paperClasses = paperStyles();
return (
<div className="App">
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column">
// Use the paper component here and assign paperClasses.root to the className prop:
<Paper className={paperClasses.root} item xs={11} >
// Put your other Grid components inside of the paper component:
<Grid item xs={11}>
// Use the Typography component for your text with the align prop set to "left":
<Typography variant="subtitle1" align="left">
Some text
</Typography>
</Grid>
</Paper>
<Paper className={paperClasses.root} item xs={11}>
<Grid item xs={11}>
<Typography variant="subtitle1" align="left">
Some text
</Typography>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
);
}
If I understood your question, I think this should fix it, just add alignContent='center' and check props of Grid
<Grid container direction="column">
<Grid item>
<AppBar position="static">
<Toolbar>MY APP</Toolbar>
</AppBar>
</Grid>
<Grid item container direction="column" alignContent='center' >
<Grid item xs={11}>
Some text
</Grid>
<Grid item xs={11}>
Some text
</Grid>
</Grid>
</Grid>
I have the following code in reactjs using material ui theme
const useStyles = makeStyles((theme) => ({
root2: {
maxWidth: 345,
flexGrow: 1
},
paper2: {
padding: theme.spacing(1),
color: theme.palette.text.secondary,
}
})
<div className={classes.root2}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" spacing={3}>
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
What i want is
I saw an example at https://material-ui.com/system/flexbox/#flex-grow
which uses the code:
import React from 'react';
import Box from '#material-ui/core/Box';
export default function FlexGrow() {
return (
<div style={{ width: '100%' }}>
<Box display="flex" p={1} bgcolor="background.paper">
<Box p={1} flexGrow={1} bgcolor="grey.300">
Item 1
</Box>
<Box p={1} bgcolor="grey.300">
Item 2
</Box>
<Box p={1} bgcolor="grey.300">
Item 3
</Box>
</Box>
</div>
);
}
I am new to material ui. Here the example uses Box instead of Grid.
So which is the best way to handle this
I am used to bootstrap 4: IN bootstrap4 i can do this same thing using
https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content
<div class="d-flex justify-content-between">...</div>
How to do something like this in material UI
Adding justify="space-between" to Grid container component will solve your issue.
Please refer this.
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" justify="space-between">
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
I'm trying to generate a grid that is three deep. Example below:
I want the black box to stretch the length of the screen, and the three boxes to be aligned on the same row. I have put the three boxes in another grid that will go to a max-width of 1200px. this is so it looks neat on large screens. I want the three boxes to stack on mobile.
below is my code
const Landing = (props) => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
blackBox:{
color:'white',
backgroundColor:'black',
width:'100%',
},
white:{
color:'white',
}
}));
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Container>
</Grid>
</div>
);
}
export default Landing;
The issue is when I add the element that only allow the three boxed to go max 1200 they all stack. When I remove it they don't stack but stretch the full with of the screen.
can anyone point me in the right direction?
You should put the Container outside the Grid
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid container>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Grid>
</Container>
</Grid>
The following grid structure in my Material-UI collapsible is my desired layout:
Desired grid layout
I already tried changing the layout by playing with the flex-direction.
https://codesandbox.io/s/epic-nobel-ov48j
When I click on the checkboxes, the last checkbox tends to "jump" from its position away and stacks itself under the other two ones. At the moment I can't find the reason why. You can see the result of this behaviour on this picture:
Undesired grid layout
On smaller screens this behaviour would be okay but especially on larger screens I want the two columns layout where the first one contains two checkboxes and the second contains the third one.
Try this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>Exmaple text</Typography>
<Grid container justify="space-between" direction="row">
<Grid container item justify="space-between" xs={6}>
<Grid container item style={{ alignItems: "center" }} direction="row">
<Grid item xs={6}>Text Supervisor</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
I'm rather new to this js / material-ui / react thing, so you probably might improve it even further.
#Radosław Cybulski: Thank you for your help. With your code and some modifications I was able to get it to work. You don't have to specify direction="row" because it is the default settting.
Now it looks like this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>
Example text
</Typography>
<Grid container justify="space-between">
<Grid container item xs={6} md={3}>
<Grid
container
item
style={{
alignItems: "center",
paddingBottom: "8px",
}}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Supervisor
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Employee
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid
container
item
xs={6}
md={3}
style={{ alignContent: "center" }}
direction="row"
>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
{useTranslation("employee")}
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Hidden smDown>
<Grid container item md={6} />
</Hidden>
</Grid>
</ExpansionPanelDetails>
How can I place a button next to typography tag inside a paper container, aligned to right/end?
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper className={classes.paper}>
<Typography inline>CPU</Typography>
<IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
</Paper>
</Grid>
</div>
Here my styles:
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
padding: theme.spacing(2),
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
}
}));
I'm using the inline attribute of Typography but the button keep going on the next line...many thanks, I'm a newbie.
If you don't mind adding more dom elements.
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper className={classes.paper}>
<Grid container alignContent="space-between" alignItems="center">
<Grid item>
<Typography inline>CPU</Typography>
</Grid>
<Grid item>
<IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</div>
Otherwise you can just change CSS propertie
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
display: flex,
alignContent: 'space-between',
alignItems: 'center'
}