Hello Birdie,
The dev team investigated the use case. It seems that there is no proper way to fix that.
In the regular mode, Gantt scrolls itself when you use the showTask
method.
When autosize
is enabled, Gantt increases its container size. So, now, it should scroll the page instead to show the task.
In a simple configuration, Gantt may be located before or after some elements in your application. And it will work correctly if you scroll the page.
In a complex configuration, the Gantt container may be included in other containers and they can also be included in some other containers. If Gantt scrolls each parent container and the page, it may not work as you expect. For example, Gantt will scroll some containers you didn’t want to scroll.
So, this problem should be solved depending on the page/application configuration.
The easiest way is to use the element.scrollIntoView
method:
var attr = gantt.config.task_attribute;
var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
if(timelineElement)
timelineElement.scrollIntoView({block:"center"});
Where id
is the task ID you need to show.
Another way is to modify the showTask
method:
var showTask = gantt.showTask;
gantt.showTask = function(id){
showTask.apply(this, [id]);
var attr = gantt.config.task_attribute;
var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
if(timelineElement)
timelineElement.scrollIntoView({block:"center"});
};
or create a custom function to show the task:
function showTask(id){
gantt.showTask(id);
var attr = gantt.config.task_attribute;
var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
if(timelineElement)
timelineElement.scrollIntoView({block:"center"});
}
Here is an example:
http://snippet.dhtmlx.com/5/71a70c1d0
In the future, we’ll add that information to the documentation.