CODEWITHSUNDEEP
reactjsmaterial-ui
Soleil
Soleil

Reputation: 401

React Material UI Grid oversize full screen

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

Upvotes: 5

Views: 3264

Answers (2)

Erika
Erika

Reputation: 41

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

Upvotes: 4

Soleil
Soleil

Reputation: 401

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

Upvotes: 0

Related Questions