I am getting this error on line Grid item :
<Grid container spacing={3} className='centerd-text' >
<Grid item xs={12} xs={12} md={4} >
<img src={img01} alt="img" />
</Grid>
</Grid>
Please remove one xs={12} in Grid
Related
So i was following a tutorial, where the items would change depending on the size of the screen. And would take up the whole width if defined the following way:
class App extends Component {
render() {
return (
<div>
<Grid container>
<Grid>
<Paper item xs={12} sm={6} md={3}>1</Paper>
</Grid>
<Grid>
<Paper item xs={12} sm={6} md={3}>2</Paper>
</Grid>
<Grid>
<Paper item xs={12} sm={6} md={3}>3</Paper>
</Grid>
<Grid>
<Paper item xs={12} sm={6} md={3}>4</Paper>
</Grid>
</Grid>
</div>
);
}}
Well for me, no matter the width of my screen it always looks like this:
I see no reason for it not to work, but somehow the elements don't stretch to take up the complete width of the screen.
The mistake you are doing here is that you are adding the Grid properties (item xs={12} sm={6} md={3}) in the Paper component instead of the Grid item.
Here is the right code:
return (
<div>
<Grid container>
<Grid item xs={12} sm={6} md={3}>
<Paper>1</Paper>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Paper>2</Paper>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Paper>3</Paper>
</Grid>
<Grid item xs={12} sm={6} md={3}>
<Paper>4</Paper>
</Grid>
</Grid>
</div>
);
Here is a working codesandbox with your example
I've created a small Dashboard in order to view achievements of some sort (won't get into details). The page consists in small boxes with certain information and to make them responsive I've used MUI Grid.
<Box>
<Grid container spacing={3}>
<Grid item xs={12} md={6} lg={6}>
<SelfNumberOfQuizzes />
</Grid>
<Grid item xs={12} md={6} lg={6}>
<SelfPointsInPeriod period={period} />
</Grid>
</Grid>
<Grid container spacing={3} mt={1.5}>
<Grid item xs={12} md={6} lg={6}>
<SelfNumberOfQuizzesByDifficulty />
</Grid>
<Grid item xs={12} md={6} lg={6}>
<SelfPointsByDifficultyInPeriod period={period} />
</Grid>
</Grid>
<Grid container spacing={3} mt={1.5}>
<Grid item xs={12} md={12} lg={12}>
<SelfAnswersByDifficulty />
</Grid>
</Grid>
</Box>
The page looks good and it works just fine when trying to shrink when lg or md (the inside items shrinks as well to be fully visible). However, once the page is small enough to use xs prop, the items don't shrink anymore, the width looks fixed.
First picture -> MD
Second picture -> XS
You can see the horizontal scroll bar when it starts to be XS. The components within each grid item don't have width specified.
What I need to produce is 3 grid items on the left and 2 grid items on the right. I tried using float on the second grid container but it didn't work the way I wanted to. The Grids also contain elements like Checkboxes so I'm not sure if that changes the alignment.
<Grid container xs={12} md={6}>
<Grid item xs={12} md={6}> 1 </Grid>
<Grid item xs={12} md={6}> 2</Grid>
<Grid item xs={12} md={6}> 3</Grid>
</Grid>
<Grid container xs={12} md={6}>
<Grid item xs={12} md={6}> 4 </Grid>
<Grid item xs={12} md={6}> 5</Grid>
</Grid>
Expected:
md:
1 4
2 5
3
Actual:
md:
1 4
2
5
3
xs:
1
2
3
4
5
You could put both columns into another container and make them it's items:
<Grid container>
<Grid item xs={12} md={6}>
<Grid item xs={12} md={6}>1</Grid>
<Grid item xs={12} md={6}>2</Grid>
<Grid item xs={12} md={6}>3</Grid>
</Grid>
<Grid item xs={12} md={6}>
<Grid item xs={12} md={6}>4</Grid>
<Grid item xs={12} md={6}>5</Grid>
</Grid>
</Grid>
I'm attempting to have a grid looking like this for larger displays:
and this for smaller sizes:
Currently the skeleton of my grid is succinctly like this:
<Fragment>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<img src={img1} />
</Grid>
<Grid item xs={12} md={6}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid item xs={12} md={6}>
<img src={img2} />
</Grid>
</Grid>
</Fragment>
How can I do such as in mobile view (width 12) the first Grid item from the second Grid container (Text content 2) displays after (below) the image?
Use like this:
<Grid container>
<Grid spacing={3} container item xs={12} md={12}>
<Grid item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abc"
/>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abd"
/>
</Grid>
</Grid>
</Grid>
SOURCE
PREVIEW
for re-order added:
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
and css :
#media screen and (max-width: 720px) {
.flexgrid{
flex-direction: column-reverse
}
}
I'm trying to deal with Grid responsiveness but I can't achieve my goal, idea is to with full screen show all 6 columns next to each other, with smaller screen decrease it to 3 columns and then another 3 columns below it. On big screen it looks fine as it looks like this:
However when I decrease width of the screen it starts to look like this:
and I have no really a clue how to make it work right, my code :
<Grid container spacing={24} style={{ padding: 24 }}>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">
Associated Security Domain
</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Life Cycle</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Load File Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Version</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Privileges</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.aid}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.associatedSecurityDomain}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.lifeCycle}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.loadFileAid}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.version}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<Tooltip
title={
<React.Fragment>
{el.privileges && el.privileges.length ? (
el.privileges.map((el, i) => <p key={i}>{el}</p>)
) : (
<p>None</p>
)}
</React.Fragment>
}
placement="top"
>
<Button className={classes.tooltipBtn}>
Hover to see Privilages
</Button>
</Tooltip>
</Grid>
</React.Fragment>
);
})}
</Grid>
and here is result I wish to achieve:
In order to achieve what you want, you'll have to change the structure for small screens.
You can use the withWidth or useMediaQuery hook from Material-UI and use conditional rendering to render the "desktop" or "mobile" layout.
Below is how the mobile structure should look like. This will contain a lot of duplicate code though.
const SmallScreenComponent = () => (
<Grid container spacing={24} style={{ padding: 24 }}>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">
Associated Security Domain
</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Life Cycle</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.aid}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.associatedSecurityDomain}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.lifeCycle}
</StyledTypography>
</Grid>
</React.Fragment>
);
})}
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Load File Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Version</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Privileges</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.loadFileAid}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.version}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<Tooltip
title={
<React.Fragment>
{el.privileges && el.privileges.length ? (
el.privileges.map((el, i) => <p key={i}>{el}</p>)
) : (
<p>None</p>
)}
</React.Fragment>
}
placement="top"
>
<Button className={classes.tooltipBtn}>
Hover to see Privilages
</Button>
</Tooltip>
</Grid>
</React.Fragment>
);
})}
</Grid>
);