gantt data area has a low width on initial load


I’m using an AngularJS directive to display the gantt chart

 <div schedule-gantt data="tasks" style='width:100%; height:200px;'></div>

Here is the directive code.

var scheduleGanttInstance = Gantt.getGanttInstance();
scheduleGanttInstance.config.scale_unit = "week";
scheduleGanttInstance.config.step = 1;
scheduleGanttInstance.config.date_scale = "%F %Y";
scheduleGanttInstance.config.scale_height = 50;

$scope.$watch($, function(collection) {
    scheduleGanttInstance.parse(collection, "json");
}, true);

$scope.$watch(function() {
    return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {


The ‘tasks’ scope variable is filled with data in the controller. However, on load this is displayed and the data area is not stretched out completely. What can be the issue?

Do you have some other css files on the page ?

Situation on screenshot is very similar to the CSS conflict. When some css rule adds padding or margin for all DIV’s on the page for example.


There are other css files on the page. However, the width of the gantt-task div is calculated in the javascript code.

On initial load, the gantt-task has low width. If the gantt is rendered again in the same session, the width automatically adjusts. I still haven’t found a solution to this problem.