Sticky text in task

Gantt React Gantt
#1

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

#2

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