Scroll bar issue

Gantt
#1

Hello,

I’m having an issue with the Gantt chart as the borders between tree and timeline are misaligned in some conditions:

misalignment.png1944×616 31.7 KB

This happens when there is a scroll bar in the tree area and not on the timeline, which happens in my case due to several columns being required.
To reproduce, please add the following lines to the 05_dynamic_scales.html sample:

[code] gantt.config.columns = [
{name:“text”, label:“Name”, align: ‘left’, tree:true, width: 100 },
{name:“start_date”, label:“start_date”, align: ‘left’, width: 100 },
{name:“duration”, label:“duration”, align: ‘left’, width: 100 }
];

gantt.config.layout = {
	cols: [
		{
			width:200,
			rows:[
				{view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"}, 
				{view: "scrollbar", id: "gridScroll"}  
			]
		},
		{resizer: true, width: 1},
		{
			rows:[
				{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
				{view: "scrollbar", id: "scrollHor"}
			]
		},
		{view: "scrollbar", id: "scrollVer"}
	]
};[/code]

After doing so and selecting Year, the issue occurs when the vertical scrollbar is moved all the way down.
Can you please help me fixing this one?

Thanks,
Artur

#2

Hello,
To fix the issue you may add the scroll bar to the timeline area even if there is nothing to scroll. To do that add group:“horizontal” to the scrollbar parameters:

{view: "scrollbar", id: "gridScroll", group:"horizontal"}

Here is the snippet showing how it works:
http://snippet.dhtmlx.com/5/a537ab33d
You may find additional information in this article:
docs.dhtmlx.com/gantt/desktop__ … lscrollbar

#3

Hello Ramil,

Thank you very much, this resolved the issue.

Regards,
Artur

#4

Hi Ramil, How can we freeze the first column “Task Name” like MS Excel , so that task name will be visible in the horizontal scroll.

#5

Hello,
Unfortunately, there is no built-in feature to fix only one column. But you can create two grid views. And the first grid will contain only one column:
http://snippet.dhtmlx.com/5/01ce4e002
If you want to disable the horizontal scroll for that first grid, you need to remove the following parameter from it:

scrollX: 'gridScrollX',

http://snippet.dhtmlx.com/5/cfe47c2c2