<Grid> in material ui causes horizontal scroll- React

Question

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.

Answer 1

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%',
  }}>

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

This worked for me!

<Box style={{overflow: 'auto'}}>
<Grid>...</Grid>
</Box>