UT Bootstrap with the wrong tick fleet

Question

I am working on an Angular web application with UI Bootstrap and have run into the problem of aligning y-tick labels in fleet diagrams using user interface tabs.

Using the standard boot tabs, the graphs correspond inside and outside the tab: http://jsfiddle.net/TDwGF/614/

However, using the UI Bootstrap tabset , we find that the y-tick labels overlap with the graph: http://jsfiddle.net/TDwGF/615/

When playing with different approaches when creating a fleet directive, I can create a graph in which only half of the y-tick labels are offset (I could not reproduce this well in the minimum example, however).

I can not find any inherited css modifications that could cause these problems, and I have not seen any luck when viewing the source code of a tab.

Any help would be appreciated.

Answer 1

I remember that something similar happened to me when working with Highcharts .

The root cause of the misalignment is probably the dynamic rendering time of the browser, which limits the canvas / svg container space.

---

To work around this problem, simply wrap up the creation of the timeout plot to display it in the next digest cycle:

 App.directive('chart', function() { return { restrict: 'A', link: function(scope, elem, attrs) { var data = scope[attrs.ngModel]; setTimeout(function(){ $.plot(elem, data, {}); scope.$apply(); }, 0); } }; }); 

See the setTimeout fiddle here .

---

Alternatively, you can enter angular $timeout , so it already calls scope.$apply() for you:

 App.directive('chart', ['$timeout', function($timeout) { return { restrict: 'A', link: function(scope, elem, attrs) { var data = scope[attrs.ngModel]; $timeout(function() { $.plot(elem, data, {}); }, 0); } }; }]); 

Take a look at the work of $timeout here.