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.
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 have a Grid container and two "sub-containers" each taking half the space of the parent grid. I want to stack items of different heights on each of the sub-containers, but I'm having a problem with one side's height affecting the other.
The code is extremely simple:
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item container xs={6}>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
</Grid>
<Grid item container xs={6}>
<Grid item xs={6}>
<Item style={{ height: "450px" }}>Tall item</Item>
</Grid>
</Grid>
</Grid>
</Box>
And also a Codesandbox forked from the documentation's. The result I want is the items on the left stacking right on top of each other.
You can add alignContent="baseline" to your left Grid container like:
<Grid item container xs={6} alignContent="baseline">
You can take a look at this sandbox for a live working example of this usage.
I have a component whose grid looks like this:
component Region:
<Grid container spacing={10} >
<Grid item xs={4} ></Grid>
<Grid item xs={4} ></Grid>
<Grid item xs={4} ></Grid>
<Grid item xs={4} ></Grid>
<Grid item xs={4} ></Grid>
</Grid>
And I use this component in another component, which also has a series of grids..component address:
<Grid container spacing={10}>
<Grid item>
<form >
<Region></Region>
<Grid container spacing={10}>
<Grid item xs={4} ></Grid>
</Grid>
<form >
</Grid>
</Grid>
What I want is for this gride to be a continuation of the other grids, but for me it goes to the next line.
What should I do to get the grid inside the address component in the following component region?
You need to have all grid items in the same grid container. So:
remove the top container and item, because you only got one item and it doesn't make sense.
remove the container from Region component and use a Fragment
remove the container from Address
Region:
<>
<Grid item xs={4}>1</Grid>
<Grid item xs={4}>2</Grid>
<Grid item xs={4}>3</Grid>
<Grid item xs={4}>4</Grid>
<Grid item xs={4}>5</Grid>
</>
Form:
<form>
<Grid container spacing={10}>
<Region />
<Grid item xs={4} >6</Grid>
</Grid>
</form>
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 achieve the following grid layout using the Grid component in Material UI.
I was able to achieve this layout in Chrome and Firefox using the following sample code, however in IE 11 all the grid items overlap and the textfields get expanded.
<Grid container direction='column' spacing={0}> // Grid 1 (Level0)
<Grid item xs={12}> // Grid 1 (Level1)
<Grid container direction='row' spacing={0}>
<Grid item xs={6}>
Logo
</Grid>
<Grid item xs={6}>
FormControl
</Grid>
</Grid>
</Grid>
<Grid item xs={12}> // Grid 2 (Level1)
<Grid container direction='column' spacing={0}>
<Grid item xs={12}> // Grid 1 (Level2)
<Grid container direction='row' spacing={0}>
<Grid item xs={12}>
<TextField/>
</Grid>
<Grid item xs={12}>
<TextField/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}> // Grid 2 (Level2)
<Grid container direction='row' spacing={0}>
<Grid item xs={6}>
<TextField />
</Grid>
<Grid item xs={6}>
<TextField />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}> // Grid 3 (Level1)
<Grid container direction='row' spacing={0}>
<Grid item xs={6}>
Label
</Grid>
<Grid item xs={6}>
Label
</Grid>
</Grid>
</Grid>
</Grid>
Please let me know where am I going wrong!
According to the Material UI documentation, Material UI supports IE 11.
However, the Grid formatting issues as you describe them are a documented problem with a fix. The issues are a result of a Grid item not having the flex size set. In Chrome you can just use <Grid item>, but for IE you need to explicitly set the flex size <Grid item xs=12>.
How does this relate to you?
In your case it looks like your child <Grid container> components should also be <Grid item> components. That is, they should be of the form <Grid container item>, but they should also have the flex size set <Grid container item xs=12>.
Below is a sample snippet:
<Grid container>
<Grid item xs={12}>
<Grid container item xs={12}>
<Grid item xs={6}>
Logo
</Grid>
<Grid item xs={6}>
FormControl
</Grid>
</Grid>
</Grid>
</Grid>