Grid falls apart after i give any margin or padding

Question

I am using bootstrap-grid system with Material UI, everything works great just a single problem and its the fact that the grid system doesn't keep its slots space after any padding or margin and instead the items go to the next row or line when there is not enough space
Here is an example
As you can see in the example, each button has a grid size of 3, meaning there should be 4 button in each row, but because of just a little bit of padding and margin now there is 3 button in each line.
What i am expecting is that the items automatically grow smaller in width when margin and padding is applied instead of going to the next line or row, how can i achieve such a thing ?
Thanks.

score 2 · Accepted Answer · answered Aug 05 '19 at 08:00

2

Don't use the bootstrap col- classes on your button. Wrap your button inside a div like this:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

Now you only need to change the styling of the button (remove / modify this):

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

If you want you can add padding / margin to your button. NEVER EVER add padding / margin to classes like .row or .col-*

answered Aug 05 '19 at 08:00

Tim Gerhard

3,477
2
19
40

This works perfectly, now it makes sense why in some places in my program this problem hadn't occur, so i should i always use div with col and use padding and margin in the components, thx!! – Ali Ahmadi Aug 05 '19 at 08:13
I was just refactoring my code to make sure the rules you mentioned are applied, and i noticed that in one part i was giving a `Select` the class grid size `col-md-12`, and this `Select` was inside a `div` with the actual grid size, for example `col-md-3`, now the reason i had given the size 12 is because i want the `Select` to be in full size!!, i tried replacing it with a width:100% in the style, but it doesn't work, so is this okay using grid size 12 to make a component full size?, didn't you say to give this grid class to the `div`s only ? – Ali Ahmadi Aug 05 '19 at 08:35
Width: 100% should work. I could not imagine why not. There's probably something wrong with your css but I would use col-* only as wrappers – Tim Gerhard Aug 05 '19 at 08:50

Ravi · Answer 2 · 2019-08-05T08:10:01.490

1

You can wrap it into Div

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <Div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button}
      >
        Default
      </Button></Div>
    );
  }

you need to import Div before use it.

import Div from "@material-ui/core/Grid";

https://codesandbox.io/s/bootstrap-grid-testcase-efi4u

edited Aug 05 '19 at 08:10

answered Aug 05 '19 at 08:03

Ravi

1,312
10
18

Yours doens't work as it should, when i resize the window and make it bigger, more then 4 button falls in one row – Ali Ahmadi Aug 05 '19 at 08:12
Oh, sry i hand't, yes the updated code works perfectly, thx!, i will consider this as the alternative solution, by the way, is there any merit to this imported `Div` and the normal `div`? – Ali Ahmadi Aug 05 '19 at 08:15
1

nope. just the same but Div is from component will have more advantage. – Ravi Aug 05 '19 at 08:22

Grid falls apart after i give any margin or padding

2 Answers2