Foundation-sites: Uncenter not working properly in Foundation 6

[eu-slack]

How to reproduce this bug:

1. Add the class small-centered or medium-centered to a set of columns in a row
2. Add the class medium-uncentered or large-uncentered to the latters

What should happen:

The columns should be aligned when _uncentered_
To achieve that, I think the _uncentered_ columns need also a clear:none;:

.large-uncentered, 
.large-push-0, .large-pull-0 {
  position: static;
  float: left;
  clear: none;
  margin-right: 0;
  margin-left: 0;
}

then the last one needs a float: right;

@media print, screen and (min-width: 64em) {

  .column.large-uncentered:last-child,
  .columns.large-uncentered:last-child {
    float: right;
  }
}

What happened instead:

For example medium-centered adds on last column:

.medium-centered, 
.medium-centered:last-child:not(:first-child) {
  float: none;
  clear: both;
}

but for large-centered adds only:

.large-uncentered, 
.large-push-0, .large-pull-0 {
  position: static;
  float: left;
  margin-right: 0;
  margin-left: 0;
}

so the columns aren't correctly aligned when _uncentered_

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

Firefox and Chrome on Linux

Test case link:

Here's a codepen: https://codepen.io/eu-slack/pen/gWBjrB

A suggested solution:

In _position.scss, line 32:

/// Reset a position definition.
@mixin grid-column-unposition {
  position: static;
  float: left;
  clear: none;
  margin-right: 0;
  margin-left: 0;
}

In _classes.scss, line 157:

// Gutter adjustment
.#{$-zf-size}-#{$push}-0,
.#{$-zf-size}-#{$pull}-0 {
  @include grid-col-unpos;
}

.#{$-zf-size}-#{$uncenter} {
  @include grid-col-unpos;

  // Reset last column alignment
  &:last-child:not(:first-child) {
    clear: none;
    @if $grid-column-align-edge {
      float: $global-right;
    }
    @else {
      float: $global-left;
    }
  }
}

[rafibomb]

Thanks for the report! Is this codepen example a representation of how you're using the grid nesting? Is it necessary to nest in this case?

[eu-slack]

@rafibomb the codepen it's just a sample, but similar to a real-world application... Necessary or not, it's not working as expected, isn't it? :)

[rafibomb]

That's a question of, should we make hard rules for using the grid where this issue would never come up, or make so flexible it can be used in many different ways? Handling all those use cases may make the grid more complex.

Anyways, since you've highlighted a possible fix, it would be good to see it in a Pull Request so we can test it and hotfix for 6.3.2. Is that something you can do?

[eu-slack]

The question is very hard to answer... :confused:

Handling all those use cases may make the grid more complex.

I agree

Is that something you can do?

I've never done it before, but I guess I can do it! :wink:

EDIT

I've just noticed this pull request #10071

[Seanom]

I think those floats need to be $global-left | $global-right I've just encountered a similar issue with RTL enabled.

Otherwise the push and pull use the wrong side to calculate its position.

[Seanom]

I've added a pull request to add a $global-left position https://github.com/zurb/foundation-sites/pull/10405

[mohamedfawzi]

@eu-slack @Seanom Thanks For Help But the problem still exists.
This is simple example for test small center and medium uncenter together and not work correctly
https://codepen.io/mohamedfawzi/pen/OQQpwN

[DanielRuf]

I can not reproduce it with 6.5.3 or did I oversee something?
https://codepen.io/DanielRuf/pen/dybvzWY
https://codepen.io/DanielRuf/pen/rNByzyP

[DanielRuf]

Closing as we did not receive any further feedback and we can not reproduce it.