Sticky text in task

Hi. I have a question, is it possible to make the text inside the beams sticky, I mean when the beam is very long and I make horizontal scrolling the text was always attached to the left edge of the beam? So that it was within the visibility and pressed to the left edge

Hello,

Unfortunately, there is no built-in option for this. However, you can achieve this manually using CSS and JavaScript.

Add the following CSS:

.gantt_task_content {
	text-align: left;
	margin-left: 4px; /* default left padding */
}

This will left-align the text inside each task bar.

Then you can adjust the text position dynamically when scrolling:

function adjustBarText() {
	const barElements = document.querySelectorAll(`.gantt_task_line`);
	barElements.forEach(function (taskBar) {
		const id = taskBar.dataset.taskId;
		const task = gantt.getTask(id);
		const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);

		let marginLeft = 4;

		const scrollX = gantt.getScrollState().x;
		if (sizes.left < scrollX) {
			marginLeft += scrollX - sizes.left;
		}

		const taskText = taskBar.querySelector(`.gantt_task_content`);
		taskText.style.marginLeft = marginLeft + "px";
	});
}

gantt.attachEvent("onDataRender", function () {
	adjustBarText();
});

gantt.attachEvent("onGanttScroll", function () {
	adjustBarText();
});

Please see an example: DHTMLX - Gantt. Display the task name when part of the text is outside the viewport