Scrollbar shows, but its always greyed out even when tasks are hidden to the right

I am assessing the use of DHTMLX Gantt in a react project. Currently I am looking at the base package, though if it looks promising I will look at the Pro version.

I’ve really struggled with getting the horizontal scrollbar to work. If I set scale to hours (which I need), I find that tasks that are on days in the future are hidden, and I can’t scroll to them.

In the following the horizontal scrollbar seems to be there, but greyed out.

Scrollbar Greyed Out

In the following, i’ve zoomed out to show that there are tasks to the right.

Cant Get to These Tasks Using Scrollbar

Here is another example, I cant get to the first task (on February 25) using the scrollbar:
https://drive.google.com/file/d/1wlwxYakx6LKmTRX0AFsXGeCDgu9eRW9-/view?usp=sharing

I’ve tried many options in code.

Primary Question
Why is the scrollbar not working?

Layout Configuration
This is my current layout, but I’ve tried many options including the default.

 const getDefaultLayout = () => {

	return {

		css: "gantt_container",

		cols: [

			{

				width: 500,

				min_width: 300,



				// adding horizontal scrollbar to the grid via the scrollX attribute

				rows: [

					{

						view: "grid",

						scrollX: "gridScroll",

						scrollable: true,

						scrollY: "scrollVer",

					},

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

				],

			},

			{ resizer: true, width: 1 },

			{

				rows: [

					{

						view: "timeline",

						scrollX: "scrollHor",

						scrollable: true,

						scrollY: "scrollVer",

					},

					{ view: "scrollbar", id: "scrollHor" },

				],

			},

			{ view: "scrollbar", id: "scrollVer" },

		],

	};

};

I’ve also played with the following configurations (the booleans i’ve tried as false and as true):

gantt.config.autoscroll = true;
gantt.config.grid_elastic_columns = true;
gantt.config.fit_tasks = true;
gantt.config.scale_offset_minimal = true;
gantt.config.show_tasks_outside_timescale = true;
gantt.config.autoscroll_speed = 50;

I construct my Gantt chart as follows:

const Gantt = (props) => {

	const inputEl = useRef(null);



	const [setupComplete, setSetupComplete] = useState(false);

	const { serviceUrl, tasks, zoom } = props;



	var setup_done = false;

	useEffect(() => {

		setSetupComplete(true);

		configureGantt(tasks, inputEl.current, serviceUrl, zoom);

	}, []);



	if (setupComplete) {

		setZoom(zoom);

	}

	return (

		<>

			<div ref={inputEl} style={{ width: "100%", height: "100%" }} />

		</>

	);

};



export default Gantt;

This is very similar to the DHTMLX provided react example (on Github), in fact I used the zoom approach found in that example in my own code.

The primary difference is I use React functional interface rather than the older style React components.

Google Drive Links
If the google drive images dont load for you either refresh the page with the link, or copy the links and paste them into a new tab, or use this folder in a new tab
https://drive.google.com/drive/folders/1htx48H47I-eb5Ynka97OgtNz7uwXEHEN?usp=sharing

https://drive.google.com/file/d/1cvNpZtPoBFxdIFoIfafu0FjBd7roFwmq/view

https://drive.google.com/file/d/18i4mZTq-kPy5JwKVex9GUcvmxlkjZpEp/view?usp=sharing

Hello David.
If I add your configuration to the snippet, the scrollbar is working correctly:
http://snippet.dhtmlx.com/5/40b54ba97

It is hard to suggest what might be wrong. Please, send me a ready demo with all the necessary files so that I can run it locally and reproduce the issue.

Hi @ramil
Thanks for your response. I’ll try to put together a demo, though my focus is first on trying some other things with gantt. For now the lack of scrollbar functionality is inconvenient but not a show-stopper.

If I do solve this, I’ll certainly post my findings.