Foundation Button Groups plain html and ng-repeat different results

Question

I upgrades my Foundation version from 5.3.3 to 5.5.2. Everything works great, expect some elements like button groups. Here is an example.

<div class="row">
  <div class="small-6 columns">
    <ul class="button-group even-2">
      <li ng-repeat="i in [1, 2]">
        <a href="#" class="button tiny">{{i}}</a>
      </li>
    </ul>
    <ul class="button-group even-2">
      <li><a href="#" class="button tiny">1</a></li>
      <li><a href="#" class="button tiny">1</a></li>
    </ul>
  </div>
</div>

This two methods will create different results. The Angular ng-repeat directive will create an smaller result. How can this happen?

I created some reproduce able example. The first is the non working example.

Example 1: http://jsfiddle.net/kauzbzby/1/ Foundation 5.5.2

The second example works as expected, but with an older Foundation version.

Example 2: http://jsfiddle.net/h5kqb4yv/1/ Foundation 5.3.3

The Angular version has not changed. Have someone an idea how to fix this?

Even examples without the even-* class will create different results

Cheers.

Answer 1

See here for explanation: http://jsfiddle.net/13k/gTm9S/

This is due to ng-repeat adding lis without spaces between them, where the manually created ones have a space due to the carriage return and tabs for alignment.

See here for your example working: http://jsfiddle.net/mk490brw/

<li><a href="#" class="button tiny">1</a></li><li><a href="#" class="button tiny">2</a></li><li><a href="#" class="button tiny">3</a></li><li><a href="#" class="button tiny">4</a></li><li><a href="#" class="button tiny">5</a></li><li><a href="#" class="button tiny">6</a></li><li><a href="#" class="button tiny">7</a></li>

Mushing all of the lis together in one line makes them the same width and spacing... even if it is a little unsightly to read.

Styles in 5.3.3 for button-group lis were

.button-group>li {
  margin: 0;
  float: left;
}

Whereas 5.5.2 is:

.button-group.even-# li {
  display: inline-block;
  margin: 0 -2px;
  width: 14.28571%;
}

Again, the important part is the inline-block. Inline block makes any spaces between each element display as a space.

If you're curious as to why this was added, it appears that it was added to support button stacking. Here's the commit https://github.com/zurb/foundation/commit/d49b9a72b9d989f2c9c7156c6a30e510cc0c9df4