0

I decided to implement a set of round circles connected by a line as outlined in this question. Everything seems to work fine in static HTML, but when I make it dynamic using Angular's ng-repeat, the circles justify left. It can be clearly illustrated by the following jsFiddle: https://jsfiddle.net/1ho1zz59/

<ul class="progress-rnd">
    <li ng-repeat="step in steps">
      {{step.name}}
    </li>
</ul>

Based on that I just have two questions:

  1. Why is this happening?
  2. And how do I fix it?

Thanks!

Community
  • 1
  • 1
MK_Dev
  • 3,291
  • 5
  • 27
  • 45

2 Answers2

1

The issue is that the text-align: justify; works on html that has a space in it differently than what angular generates (li tags are followed by commented html and the next tag). This directive should work, example:

var app = angular.module('testApp', []);
angular.module('testApp')
.directive('addASpaceBetween', [function () {
        'use strict';
        return function (scope, element) {
            element.after(' ');
        }
    }
]);

and adding it to the repeat ng-repeat="step in steps" data-add-a-space-between

Dmitry Sadakov
  • 2,128
  • 3
  • 19
  • 34
0

The reason is because in Html, when you have elements inline-block, you have whitespace between them, in this case your LI tags. You can fix it by creating a real distance between them in CSS, and not relying on HTML.

Solution http://jsbin.com/qumawex/edit?css,output

Jean Troiani
  • 45
  • 4