[Grid] Extra width of container & scrollbar

[vedant1811]

The <Grid container> extends beyond its parent, with half of spacing size.
I have marked the extra width in red, also setting spacing to zero fixes the problem.

Here is a working example: https://codesandbox.io/s/Y8nzGm5W.
Similar code with a zero spacing works as expected: https://codesandbox.io/s/NxvYxvQpL.

[oliviertassinari]

I have found the same issue on flexboxgrid. I think that it's a limitation of our negative margin solution that implements the spacing.
I have checked out what bootstrap is doing, they don't have this spacing feature, so no issue on their end.

So you have 3 available workarounds:

• Not using the spacing feature and implementing it on userland spacing={0}, we could make this the default behavior.
• Adding a padding on the parent with, at least, the spacing value: https://codesandbox.io/s/WnpKlQ32n

    <div style={{ padding: 20 }}>
      <Grid container spacing={40}>

• Adding overflow-x: hidden; on the parent.

I'm closing as I can't think of a better alternative. If someone has a better solution for the spacing feature, please raise your voice :).

[hboylan]

To me, it seems like spacing={0} should be the default behavior. At least until a better solution comes along, because it appears to be a bug with <Grid /> to first-time users of material-ui.

[oliviertassinari]

@hboylan In the light of all those issues open for this limitation, I'm starting to wonder! I wish we had access to some API usage analytics 📈 .

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm not sure people would prefer having spacing={0}. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[oliviertassinari]

At least 8 duplicated issues is a strong signal. I will add a note about this limitation in the documentation.

[PutziSan]

Just wondering: Are there any caveats using the 2nd workaround you described?

If not, you could add this in the Grid-container-Component per default?

update:
=> silly me ;) of course: we are loosing the space, sorry.

[dukuo]

I'm unable to fix this in material-ui@next using spacing={0} in the container, or any of the other two solutions including overflowing-x and such. Maybe i'm missing something?

[mbrookes]

flexboxgrid (which @oliviertassinari mentioned having the same issues) has a fork that claims to have fixed it. kristoferjoseph/flexboxgrid#144 (comment) I haven't dug into the code, but might be worth investigating to see if there's something we can use in Grid.

[kmlx]

Hi,

We recently started adopting this library for one of our projects.

You can imagine our surprise when we found out this thread.

Basically this is a bug that's closed with no workarounds as of the latest material-next version. This is worrying.
Even more worrying is the idea that instead of fixing this bug, we now have text added in the docs talking about "a limitation".

Do you guys have any procedures regarding bugs and bugfixes? Or is everything decided on the spot?

---

This is the 1.0.0-prerelease:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Extrapolating from this thread, shall we assume 1.0.0-prerelease actually has lots more bugs than what we see there? (i.e. this issue for example)

How many valid material-ui bugs did you guys close so far on github, and instead of fixing you added text in the docs?

Otherwise the framework is great. It's the procedures that are a bit worrying.

Thank you, and I apologise if I offended anyone and/or if I came a bit strong.

[mbrookes]

@kmlx

shall we assume 1.0.0-prereleasebeta actually has lots more bugs than what we see there?

You certainly should (see: Issues). And you should expect 1.0.0-rc.x to have bugs too, but the API will be mostly stable.

The timing of @ryanflorence's tweet is perfect.

I apologise if I offended anyone and/or if I came a bit strong.

If you know you're coming across a bit strong, don't apologize; rethink what it is you want to say, and how you want to say it. (And perhaps take a look at how much value you've got out of open source, vs. how much you've contributed, and decide if your complaint carries any weight.)

Better still, if the workarounds provided in the docs aren't sufficient, get stuck in to the CSS and see if you can resolve the limitation that's bothering you.

[shawaner]

I met a similar issue, and fixed by:

body { margin: 0; padding: 0; }

[codingdash]

Ended up doing below:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

This solves the issue.

[sakulstra]

was just facing that issue as well and looking at the amount related issues i was wondering if it makes sense to fix this in material-ui.

Couldn't we essentially do the same as they do here: imevro/flexboxgrid2@37e02fe#diff-4b62e0ae269a54df45ab5eab9cb7821b ?

[ryanagillie]

Ran into the same issue, found a semi-fix by doing

<Container maxWidth={false}>
  <Grid container spacing={3}>
    <Grid item />
  </Grid>
</Container>

[sajadghawami]

Still have the same issue, but fixed by adding xs={12}.
<Grid container spacing={3} xs={12}>

This fixed it fo me... thanks!

[cnadolny2s]

Still have the same issue, but fixed by adding xs={12}.
<Grid container spacing={3} xs={12}>

This fixed it fo me... thanks!

Awesome solution! This fixed it for us, too. We had to add container item to prevent a container + xs warning.

[SomnathKadam]

issue resolved after adding overflow-x: hidden; on the parent, like inside Container have mui-datatable, so added overflowX: 'hidden' to container

[Tuaev]

Ended up doing below:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

This solves the issue.

Thanks, this was the only working solution for me.

[KATT]

Seems to work for me to omit the margin 0 !important

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        // margin: "0 !important"
      }
    },
  }
});

[alvamanu]

It's baffles me this ui framework has so many bugs. Your <div style={{ padding: 20 }}> wrapped around container grid workaround works. But it's not a solution.

Grid should belong ANYWHERE. Bootstrap allows it everywhere without issues. They even have offsets to deal with these margin bugs.

Is this ever going to get fixed?

[alvamanu]

@SomnathKadam

issue resolved after adding overflow-x: hidden; on the parent, like inside Container have mui-datatable, so added overflowX: 'hidden' to container

The problem with this is that you can still scroll. overflow-x: hidden is not a good solution

[alvamanu]

MuiGrid: {
container: {
width: "100% !important",
margin: "0 !important"
}
},
@rag4214
This is forcibly modifying the structure of the whole framework and is not recommended. You might fix it on one place, break it on another.

[oliviertassinari]

@manualva7 https://material-ui.com/components/grid/#negative-margin

[hutber]

I am shocked, I've been using MUI for maybe 2 years and never seen this before. Still not worked out why its happened.

[daveteu]

Ended up doing below:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

This solves the issue.

This solution works for me.

This has been going on for so long it should be part of the documentation if a fix is not immediately possible.

[vivek-itmtb]

Is there any fix yet?
I am having this issue and thinking of using overflow-x: hidden, What do you think?

[gajet5]

The problem is still there. The solution overflow-x: hidden property on the parent

[ar4hc]

Just another hack for this, which works for me ;)

const useStyles = makeStyles((theme) => ({
 root: {
    '& .MuiGrid-root': {
      width: 'calc(100% - 2px)',
    },
  },
// [...]

those 2px seems to be added somewhere below my grid definition, so the actual value could be different for other people...

[oliviertassinari]

This issue was fixed in v5 with #24332.

[rene-mdd]

Just make xs spacing 0 and add row spacing: spacing={{ xs: 0, md: 2 }} rowSpacing={2} The problem is only on xs screen breakpoint.