5

working with Material UI Grid, this has oversize full screen and generate horizontal scroll bar, how to can fix it ? 

const styles = theme => ({ root: { flexGrow: 1,}, paper: {  padding: theme.spacing.unit * 2,textAlign: 'center',color: theme.palette.text.secondary,},});

generate like horizontal scroll bar

Soleil
  • 381
  • 4
  • 9
  • It's not quite clear what you are asking. Do you think you could elaborate a bit, and include the code you have written so far? – Tholle Aug 07 '18 at 22:41

2 Answers2

4

I had the same problem. Find out that using minHeight: "100vh" solves this problem

root: {
  minHeight: "100vh",
}

where i found this solution

the bellow worked too:

root: {
  position: 'fixed',
  width: '100%',
  height: '100%',
  left: 0,
  top: 0,
  zIndex: 10,
}

where i found this solution

Erika Lira
  • 41
  • 8
0

After too much test, I get solve this problem, change spacing 24 to 16, because childs has 12, I hope this helps someone

  <Grid container spacing={16}>

Without horizontal scroll bar

Soleil
  • 381
  • 4
  • 9