I have a code here for the video and login page template. However, as you can see it does not work? It goes to the top of the login page. When I was using a picture, it disappeared as stated. How can I force xs={} setting?
<Grid container component='main' className={classes.root}>
<CssBaseline />
<Grid item xs={false} sm={4} md={9}>
<BackgroundVideo />
</Grid>
<Grid
item
xs={12}
sm={8}
md={3}
component={Paper}
elevation={6}
square
className={classes.formBackground}
>
xs={false} means that there is no breakpoint, so it doesn't change sizing at this breakpoint. false is a default value for all breakpoints.
You can hide Grid item by wrapping it with a Box component.
<Box
component={Grid}
item
sm={4}
md={9}
display={{ xs: "none", sm: "block" }}
>
<BackgroundVideo />
</Box>
As the answer from Nikolai Kiselev mentioned, values of false or 0 will not hide the grid item.
The way I've been getting around this is by wrapping my grid items in a Hidden component like so (using your example as a base):
<Grid container component='main' className={classes.root}>
<CssBaseline />
<Hidden only='xs'>
<Grid item xs={false} sm={4} md={9}>
<BackgroundVideo />
</Grid>
</Hidden>
<Grid
item
xs={12}
sm={8}
md={3}
component={Paper}
elevation={6}
square
className={classes.formBackground}
>
Make sure to note that if you go with this approach, whatever value you pass in the breakpoints where the component will be hidden (xs in this example) will be ignored, since the component will be hidden.
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 am trying to have 3 horizontal cards with the same height and it must be responsive. So the issue is coming that if the content of one card is larger than the other's, the card's height is not the same and one card look's bigger in height than the other. So I generally want a fixed height of these 3 cards so that whether the content is less or more, all the 3 cards must have the same height accordingly.
I am using "Material-UI" in this and used the Card component from it.
<Grid container spacing={2}>
<Grid item>
<Card>
Card 1
</Card>
</Grid>
<Grid item>
<Card>
Card 2
</Card>
</Grid>
<Grid item>
<Card>
Card 3
</Card>
</Grid>
</Grid>
If I tried using Grid's component as "Card", then it works fine with the height of all the cards are constant regardless of content present inside them. But then I cannot provide spacing between the cards and hence the structure looks quite compact.
<Grid container spacing={2}>
<Grid item component="Card">
Card 1
</Grid>
<Grid item component="Card">
Card 2
</Grid>
<Grid item component="Card">
Card 3
</Grid>
</Grid>
You can try
<Card style={{ height: '100%' }}>
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.
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>