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>

Answer 6

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.

Answer 7

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>

Answer 8

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>

Answer 9

This is a known limitation of the grid with negative margins. https://material-ui.com/components/grid/#limitations.

1. Don't use Grid spacing and manually configure your spacing.

2. 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.

3. 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...

Answer 10

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>