I'm using the material UI react components, particularly the problem seems to be about the Grid component. I'm getting a very weird space as shown in the image and I cannot find out where it is coming from.
I've reduced the problem to the minimum possible and now it's just a Grid inside a Grid that contains two images.
<Grid container direction={"column"} style={{ "background-color": "red" }}>
<Grid item>
<Grid container style={{ "background-color": "blue" }}>
<Grid item xs={11} style={{ "background-color": "purple" }}>
<CustomImg />
<CustomImg />
</Grid>
</Grid>
</Grid>
</Grid>
I don't understand where the red space is coming from.
A clue: If I change the <Grid item xs={11} to be xs={12} or remove the whole xs={...} then the space goes away....
Here is the codesanbox so you can hopefully tell me what I am doing wrong:
https://codesandbox.io/s/x7q8q0rr5z
After playing in your sandbox, I believe it's caused by you having the two CustomImg components in the inner Grid item. If you have one, it goes away. Hopefully this helps.
Related
I am just learning Material UI with react. Starting with V5.
I have a basic 12 column grid just to learn this.
The spacing is just not working properly. It is just creating a weird padding on the grid items where the items themselves are getting internal padding and I don't see the gutters.
I tested it on the most basic example to ensure its as simple to see:
Here is the code:
//MuiGrid.js
import React from 'react'
import {Grid, Typography, Box} from '#mui/material';
export default function MuiGrid() {
return (
<Box>
<Typography variant='h2'>MUI Grid!</Typography>
{/* Testing Grid Spacing */}
<Box component='section'>
<Typography variant='h5'>Testing Spacing</Typography>
<Box>
<Grid container spacing={2}>
<Grid item sx={{backgroundColor: 'primary.dark'}}>Item 1</Grid>
<Grid item sx={{backgroundColor: 'primary.main'}}>Item 2</Grid>
<Grid item sx={{backgroundColor: 'primary.light'}}>Item 3</Grid>
</Grid>
</Box>
</Box>
</Box>
)
}
I have managed to reproduce this with my first sandbox.
Here is the link:
https://codesandbox.io/s/quirky-lake-50pqf5?file=/src/Demo.tsx
Here are the screenshots before & after spacing is applied, it shows just odd padding:
All the documentation is very vague and only shows basic information & I can't see what I have done wrong here
Edit 2:
I tried to make spacing 0 and add padding as suggested by the answer, that works well to provide padding but I can't get gutters
See code:
<Box component='section'>
<Typography variant='h5'>Testing Spacing</Typography>
<Box>
<Grid container spacing={0}>
<Grid p={1} item sx={{backgroundColor: 'primary.dark'}}> <Box>Item 1</Box></Grid>
<Grid p={1} item sx={{backgroundColor: 'primary.main'}}><Box>Item 2</Box></Grid>
<Grid p={1} item sx={{backgroundColor: 'primary.light'}}><Box>Item 3</Box></Grid>
</Grid>
</Box>
</Box>
Result:
Also here is the link to GitHub issue I have created: https://github.com/mui/material-ui/issues/31244
I have added background to the container and coloured the box inside the items, this provides a better idea about what is happening:
<Box component='section'>
<Typography variant='h5'>Testing Spacing</Typography>
<Box>
<Grid container spacing={2}
sx={{backgroundColor: 'secondary.main'}}
>
<Grid item> <Box sx={{backgroundColor: 'primary.dark'}}>Item 1</Box></Grid>
<Grid item><Box sx={{backgroundColor: 'primary.main'}}>Item 2</Box></Grid>
<Grid item><Box sx={{backgroundColor: 'primary.light'}}>Item 3</Box></Grid>
</Grid>
</Box>
</Box>
Result:
Spacing can indeed be a bit confusing with Grid.
I usually set spacing(0) for the Grid container and handle padding / margin by the content of each Grid item
<Grid container spacing={0}>
<Grid item>
<Box p={1}>Item 1</Box> // use m={1} if you want margin
</Grid>
<Grid item>
<Box p={1}>Item 2</Box>
</Grid>
<Grid item>
<Box p={1}>Item 3</Box>
</Grid>
</Grid>
Alternatively, if you want to use spacing(2) you can account for the spacing's offset and wrap your Grid container in a Box that manages this offset.
<Box m={xs ? -1 : -3}> // pseudo code check
<Grid container spacing={2}>
<Grid item xs={12} sm={4}>Item 1</Grid>
<Grid item xs={12} sm={4}>Item 2</Grid>
<Grid item xs={12} sm={4}>Item 3</Grid>
</Grid>
</Box>
Personally, I'm not a huge fan of this approach. I like using Grid for mobile flexibility and with the margin-offset approach, you have to keep good track of how many grid items you have per row, and then adjust the box margin based on this.
The behavior of the MUI grid spacing is a bit unexpected since it moves the grid items to the bottom right. To keep the grid items centered you'll need to manually add paddings to the right and bottom of the container or items.
One option is simply to add the same amount of spacing as padding to the right and bottom of the grid. The drawback is that you' ll have to calculate the proper amount of padding, if your grid container itself has already a padding.
The second option is to make the grid items context aware and add right padding to the last items in a grid row when the row is full. This will still leave you with the task to calculate the proper bottom padding of the grid.
It would be more intuitive if the calculations of the right and bottom paddings were done internally by the MUI grid.
However, here is a simple Wrapper component that adjusts the right padding of the outer grid items in order to center the items horizontally. You'll only have to add addtional padding at the bottom of the grid.
EDIT
Actually I realized that the intial approach with adding padding just to the last columns also changes the width of the last element. So here is a much simpler approach by overriding the MUI spacing and just add half of the spacing to the left and right of all the elements. The code becomes also much simpler.
import { Breakpoint, GridSize, GridSpacing } from '#mui/material';
import { FC, ReactElement, cloneElement } from 'react';
type GridWrapperSettings = {
spacing: GridSpacing;
columns: { [key in Breakpoint]?: GridSize };
};
export const GridWrapper: FC<GridWrapperSettings & { children?: ReactElement }> = (props) => {
if (!props.children) {
return <></>;
}
// remove MUI spacing
const grid = cloneElement(props.children, {
spacing: 0,
});
// adjust items
const items = grid.props.children.map((c) => {
return cloneElement(c, {
// assign responsive column settings
xs: props.columns.xs,
sm: props.columns.sm,
md: props.columns.md,
lg: props.columns.lg,
xl: props.columns.xl,
// assign half of the spacing on each side and a full spacing at the bottom
sx: {
pr: 0.5 * (props.spacing as number),
pl: 0.5 * (props.spacing as number),
pb: props.spacing,
},
},
});
});
return cloneElement(grid, {
children: items,
});
};
When using you only have to set the spacing and columns once in the wrapper:
<GridWrapper spacing={4} columns={{ xs: 12, md: 6}}>
<Grid
container
direction="row"
justifyContent="center"
alignItems="stretch"
>
<Grid item>My Item</Grid>
<Grid item>My Item</Grid>
</Grid>
</GridWrapper>
I am using Material UI in a react app. I am using the Material UI component cards and I am getting some undesired results. I am getting white space on the right edge of the page. I am hoping to create gaps between "neighboring" cards. In order to do this, I have implemented the following code:
<div>
<Grid container spacing={10} justify="center">
<Grid item xs={12}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
<Grid item xs={12} lg={6}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
<Grid item xs={12} lg={6}>
<Card>
<CardContent>
...
</CardContent>
</Card>
</Grid>
</Grid>
</div>
This gets the desired spacing around and between the cards. However it also adds white space to the right side of the page. So that the page is now horizontally scrollable. When I remove the spacing={10} argument this space is no longer there. Is there a way to get the best of both worlds and the spacing between the cards without pushing padding over the edge of the screen?
Would love to hear any ideas! Thanks!
This behavior is a known limitation with Material-UI.
You have two options:
Eliminate the spacing entirely and use your own CSS
Apply padding to the parent div. Ex:
<div style={{ padding: 30 }} >
<Grid container spacing={10} justify="center">
.....
</Grid>
</div>
Demo
You can read more about this on Material-UI's documentation: https://material-ui.com/components/grid/#negative-margin
I would like to align two items as follows:
The first one in the middle of the top row.
The second, on the same row as the first, but at the far end.
I tried this:
<Grid container alignItems="center" justify="center">
<Grid item>
<Typography variant="subtitle2">
4 / 4
</Typography>
</Grid>
<Grid
container
alignItems="flex-start"
justify="flex-end"
direction="row"
>
<IconButton>
<HelpOutlineIcon />
</IconButton>
</Grid>
</Grid>
But I get:
Basically, I want the Question Mark Icon to be on the far right of 4 / 4 on the same row, as the black arrow shows.
one option is to fake it and put a blank <div/> at the beginning and then you have 3 divs and can easily space with justify-content: space-between
another way is to position the question mark with absolute, make sure the parent is position: relative and then apply top: Xpx and right: Xpx to the question mark with X being the amount of pixels you want to give it for the spacing
I added a temp div and justify="space-between. This did the trick for me.
<Grid container alignItems="center" justify="space-between">
<div></div>
<Typography variant="subtitle2">4 / 4</Typography>
<IconButton>
<HelpOutlineIcon />
</IconButton>
</Grid>
I don't quite understand the React Material-UI grid system. If I want to use a form component for login, what is the easiest way to center it on the screen on all devices (mobile and desktop)?
Since you are going to use this on a login page.
Here is a code I used in a Login page using Material-UI
MUI v5
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justifyContent="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
MUI v4 and below
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
>
<Grid item xs={3}>
<LoginForm />
</Grid>
</Grid>
this will make this login form at the center of the screen.
But still, IE doesn't support the Material-UI Grid and you will see some misplaced content in IE.
As pointed by #max, another option is,
<Grid container justifyContent="center">
<Your centered component/>
</Grid>
Please note that versions MUIv4 and below should use justify="center" instead.
However, using a Grid container without a Grid item is an undocumented behavior.
Update on 2022-06-06
In addition to that, another new and better approach will be using the Box component.
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
This was originally posted by Killian Huyghe as another answer.
Hope this will help you.
You can do this with the Box component:
import Box from "#material-ui/core/Box";
...
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<YourComponent/>
</Box>
Another option is:
<Grid container justify = "center">
<Your centered component/>
</Grid>
Here is another option without a grid:
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
<YourComponent/>
</div>
The #Nadun's version did not work for me, sizing wasn't working well. Removed the direction="column" or changing it to row, helps with building vertical login forms with responsive sizing.
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: "100vh" }}
>
<Grid item xs={6}></Grid>
</Grid>;
If you just need to center a couple of items in a row or column in MUI v5, you can use Stack instead of Grid:
<Stack alignItems="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Another example with row direction:
<Stack direction="row" justifyContent="center">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
Live Demo
With other answers used, xs='auto' did a trick for me.
<Grid container
alignItems='center'
justify='center'
style={{ minHeight: "100vh" }}>
<Grid item xs='auto'>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Log in with Google"
onSuccess={this.handleLogin}
onFailure={this.handleLogin}
cookiePolicy={'single_host_origin'}
/>
</Grid>
</Grid>
All you have to do is wrap your content inside a Grid Container tag, specify the spacing, then wrap the actual content inside a Grid Item tag.
<Grid container spacing={24}>
<Grid item xs={8}>
<leftHeaderContent/>
</Grid>
<Grid item xs={3}>
<rightHeaderContent/>
</Grid>
</Grid>
Also, I've struggled with material grid a lot, I suggest you checkout flexbox which is built into CSS automatically and you don't need any addition packages to use. Its very easy to learn.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Little update 07-09-2021 'justify' is now 'justifyContent="center"'
https://material-ui.com/components/grid/
The most versatile solution for me is using container and item props in combination.
The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.
Grid MUI documentation - https://mui.com/material-ui/react-grid/#responsive-values
<Grid container alignContent={'center'} xs={12}>
<Grid container item xs={6} justifyContent={'start'}>
<span> content one </span>
</Grid>
<Grid container item xs={6} justifyContent={'center'}>
<span> content two </span>
</Grid>
</Grid>
You can make this component and use it everywhere you want. also you can add your props:
import Box from '#mui/material/Box';
export default function Center(props: any) {
const { children } = props
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
}}
{...props}
>
{children}
</Box>
);
}
just do style={{display:'flex';justifyContent:'center';alignItems:'center'}}
I'm using Material-UI version 1. installed by this command:
npm install -S material-ui#next
Everytime I want to use , an unwanted horizontal scroll appears in the page.
Code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';
const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'center',
color: theme.palette.text.secondary,
marginTop: "3rem"
},
}));
function Login(props) {
const classes = props.classes;
return (
<div className={classes.root}>
<Grid container gutter={24} justify='center'>
<Grid item xs={12} md={12} sm={12} lg={12}>
<NavMenu/>
</Grid>
<Grid item xs={6} sm={6} md={6} lg={6}>
<Paper className={classes.paper}>
<LoginPanel />
</Paper>
</Grid>
</Grid>
</div>
);
}
Login.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styleSheet)(Login);
Bootstrap and other grid layout options are in conflict with this library. When I use <Grid> in other parts of a component(for example in drawer), horizontal scroll appears makes the UI ugly
NavMenu and LoginPanel are some self-made components and they work and using them without doesn't cause horizontal scroll.
I had the same issue. I figured out a couple solutions but neither feel very elegant:
Disable spacing
Unfortunately this removes all padding from child grid items within the container:
<Grid container
spacing={0}>
Manually fix the CSS
This is what I ended up doing:
<Grid container
style={{
margin: 0,
width: '100%',
}}>
Copied the easy solution from comment:
added xs={12} to <Grid container>
<Grid container spacing={3} xs={12}>
credit to https://github.com/mui-org/material-ui/issues/7466#issuecomment-509150645
This is caused by spacing. Sometimes we can still use spacing by limiting the Grid under a Container.
<Container maxWidth={false}>
<Grid container spacing={6}>
Omit
</Grid>
</Container>
The best solution here is to wrap the grid in a container with the max width
<Container>
<Grid container spacing={2}>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
<Grid item sm={6}></Grid>
</Grid>
</Container>
This way the overflow is taken care by the container and the grid always expands responsively into the parent. This by far is the most elegant solution I have found.
Tip: If your are using this library to create something like a dashboard then always have the parent for content area as <Container>, This way the overflow problem never occurs. Give it a shot. Worked well for me after struggling for some time and only finding non elegant solution everywhere. I must say this should be documented well in the react Material UI pages.
This worked for me!
<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>
The root issue is now fixed in the latest version of Material-UI (v5.0.0-alpha.30). See https://github.com/mui-org/material-ui/issues/7466#issuecomment-820736245.
I was facing the same issue. Remove spacing from the Grid container didn't solve it.
Solution:
Instead of setting with on the parent of the Grid container, setting maxWidth fixes the issues and assigns the desired width. For example, if we set maxWidth on the Box that is the parent of Grid container, then the Grid doesn't overflows horizontally.
We don't need to set width 100% on the Grid container because its purpose is to adapt to 100% width by default.
<Box style={{ maxWidth: 600}}>
<Grid container spacing={3}>
...
</Grid>
</Box>
well the idea i came up is
<Grid container>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
<Grid item xs={12} md={4}>
<div style={{width:"97%",margin:"0 auto"}}>
.....Your content
</div>
</Grid>
</Grid>
This is a known limitation of the grid with negative margins. https://material-ui.com/components/grid/#limitations.
Don't use Grid spacing and manually configure your spacing.
Add padding equal to at least half of the spacing to the parent, For Example:
12 = 3 (spacing) * 8 (theme spacing pixels) / 2
<Box p={12}> {/* or style={{ padding: 12 }} */}
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it changes the look of the component.
set overflow-x: hidden
<Box style={{overflowX: "hidden"}}>
<Grid ... spacing={3}>
..additional configuration
</Grid>
</Box>
The downside to this solution is that it (in my testing) causes issues with touchscreens trying to scroll vertically...
For some reason none of the answers worked for me, I fixed it in Container like this:
<Container component="div" sx={{ maxWidth: "100vw" }}>
<Grid container spacing={3}>
...
</Grid>
</Container>