Foundation-sites: Foundation 6.4.1 mixin xy-grid/_collapse.scss wrong padding collapse

[erredeco]

When using for example "medium-padding-collapse" you will end with margin-left:0; margin-right:0

How to reproduce this bug:

1. use the class medium-padding-collapse

What should happen:

It should reset the padding

What happened instead:

It resets the margin, instead

Browser(s) and Device(s) tested on:

Chrome (latest on Mac)

Where goes wrong?

mixin xy-grid/_collapse.scss, lines 42 and following:

  @else {

    @each $value in $gutter-position {
      margin-#{$value}: 0;
    }

    > #{$selector} {
      @each $value in $gutter-position {
        padding-#{$value}: 0;
      }
    }
  }

[cybi33]

Yes you are right... And this is not the only one. F6.4 should never released with so many bugs !!! Has anyone at zurb tested this version ???

[brettsmason]

@erredeco Can you post a CodePen with this?
I've just setup a quick demo and all appears to be working correctly for me. Those details in the mixin that you posted are correct - we reset the margin of the grid itself (margin grids have negative margin on the grid, padding grids have negative margin on nested grids) and then remove padding from the child cells (or margin for margin gutters).

@cybi33 5 release candidates were released prior to the final version shipping and lots of bugs were caught in testing. However if users dont test the RCs and file issues then its hard to get all bugs ironed out prior to release, expecially on something so complex and new as the XY grid. If you have found bugs then please submit issues so we/ the community can fix them, or even better submit pull requests 😄

[erredeco]

@brettsmason ok I've seen the problem (https://codepen.io/erredeco/pen/zzWMVd) I added grid-container to the same div as grid-x (as suggested here https://github.com/zurb/foundation-sites/issues/10141#issuecomment-311732468)

[IamManchanda]

@cybi33 We tested it a lot but its a new grid!

[brettsmason]

@ebargtuo The issue is you are using a collapse class too, which removes the margin on the grid-x, and as a result removes the auto added by grid-container. Basically it was designed to require a wrapper container around grid-x in order to function correctly. I know it may not be quite as convenient as the old row and column, but it provides a lot more flexibility in the long run.

@kball / @IamManchanda Do you class the above as a bug, or are we OK to close this?

[kball]

Well I think we have a legit collapse bug... see https://github.com/zurb/foundation-sites/pull/10319

[brettsmason]

@kball Yeah saw that, but I dont understand the bug... It looks correct to me.
I guess the only thing you could argue is the removal of margin on padding isn't needed for non-nested level, but it is needed on nested padding grids (we set negative on nested padding so it aligns correctly).

[brettsmason]

Just to clarify this in detail:

• No padding is ever set directly on grid-padding-x, just grid-padding-x > .cell
• The margin reset is basically for nested padding grids, as they set negative margins on the grid itself

The grid is designed to require a grid-container as a wrapper to the grid. unofficially it will work on padding grids as long as you aren't using collapse classes (as this resets the auto margin).

The mixin is working correctly, but after discussion with @kball I can see why this might look confusing removing margin from a padding grid. I'll try and put a comment within the mixin to clarify this.

[IamManchanda]

I concur with @brettsmason !!!