Fix for height jitters when truncating single lines

src/components/events/events-directive.tpl.html

@@ -19,8 +19,8 @@
           <summary source="event" show-type="vm.showType"></summary>
         </td>
         <td class="hidden-xs" ng-click="vm.open(event.id, $event)">
-          <abbr ng-if="event.data.Name && event.data.Identity" title="{{::event.data.Name}} ({{::event.data.Identity}})" truncate overwrite-tooltip="false">{{::event.data.Name}}</abbr>
-          <span ng-if="!event.data.Name || !event.data.Identity" truncate>{{::(event.data.Name || event.data.Identity)}}</span>
+          <abbr ng-if="event.data.Name && event.data.Identity" title="{{::event.data.Name}} ({{::event.data.Identity}})" truncate overwrite-tooltip="false" ng-bind-template="{{::event.data.Name}}"></abbr>
+          <span ng-if="!event.data.Name || !event.data.Identity" truncate ng-bind-template="{{::(event.data.Name || event.data.Identity)}}"></span>
         </td>
         <td ng-click="vm.open(event.id, $event)">
           <span ng-if="vm.hideSessionStartTime && event.data.Type === 'session'">--</span>

src/components/truncate/truncate-directive.js

@@ -6,13 +6,39 @@
       return {
         restrict: 'A',
         link: function (scope, element, attrs) {
+          var el = angular.element(element);
+          var lines = attrs.lines || 1;
+
+          // workaround for single-line truncations so they don't cause height jittering
+          var defaultOverflow, defaultWhiteSpace, firstRender;
+          if (lines === 1) {
+            firstRender = true;
+            defaultOverflow = el.css('overflow');
+            defaultWhiteSpace = el.css('whitespace');
+            if (!defaultOverflow) defaultOverflow = "initial";
+            if (!defaultWhiteSpace) defaultWhiteSpace = "initial";
+            el.css('overflow', "hidden");
+            el.css('white-space', "nowrap");
+          }
+
+          // function to provide debounced truncation (useful so window resizing doesn't cause issues)
           var truncate = debounce(function () {
-            angular.element(element).trunk8({ lines: attrs.lines || 1, tooltip: (attrs.overwriteTooltip !== undefined ? attrs.overwriteTooltip === true : true) });
-          }, 150);
+            if (firstRender) {
+              firstRender = false;
+              el.css('overflow', defaultOverflow);
+              el.css('white-space', defaultWhiteSpace);
+            }
+
+            el.trunk8({
+              lines: lines,
+              tooltip: (attrs.overwriteTooltip !== undefined ? attrs.overwriteTooltip === true : true),
+            });
+          }, 100);
 
-          // TODO: Fix this bug: http://branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls/
-          var timeout = $timeout(truncate, 150);
+          // execute truncate after a short delay - this is so the browser can calculate the available width of the containing element.
+          var timeout = $timeout(truncate, 100);
 
+          // register for resize events as this is the only other time we may need to update
           var window = angular.element($window);
           window.bind('resize', truncate);