fix(progressbar): fix stacked progress bars breaking width

Fixes angular-ui#4018
SteffanLong · Jul 28, 2015 · f86a06a · f86a06a
1 parent a028d2a
commit f86a06a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/progressbar/progressbar.js b/src/progressbar/progressbar.js
@@ -27,6 +27,15 @@ angular.module('ui.bootstrap.progressbar', [])
 
         bar.recalculatePercentage = function() {
             bar.percent = +(100 * bar.value / bar.max).toFixed(2);
+
+            var totalPercentage = 0;
+            self.bars.forEach(function (bar) {
+                totalPercentage += bar.percent;
+            });
+
+            if (totalPercentage > 100) {
+                bar.percent -= totalPercentage - 100;
+            }
         };
 
         bar.$on('$destroy', function() {

diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js
@@ -258,6 +258,21 @@ describe('progressbar directive', function () {
         $rootScope.$digest();
         expect(getBar(0).attr('aria-valuemax')).toBe('300');
       });
+
+      it('should not have a total width over 100%', function() {
+        $rootScope.objects = [
+          { value: 60, type: 'warning' },
+          { value: 103 },
+          { value: 270, type: 'info' }
+        ];
+        $rootScope.max = 433;
+        $rootScope.$digest();
+        var totalWidth = 0;
+        for (var i = 0; i < 3; i++) {
+          totalWidth += parseFloat(getBar(i).css('width'));
+        }
+        expect(totalWidth.toFixed(2)).toBe('100.00');
+      });
     });
   });
 });