Rightside_text overlapping when parent has renderer set to 'split'


Hi, I’m having some issues with the rightside_text overlapping in case parents have the ‘render’ property set to ‘split’. Here’s a snippet of my issue:


Any ideas of how I can approach/fix this?


Hi @Zegrean_Claudiu,

The current behavior looks kind of expected, cause usually “right/left” side templates use in case of enough space on sides.

This behavior can be fixed in a few ways depends on the result you want to reach.

You can do a few things to make the “right/left” side text more readable:

You can return the rightside text inside the div element with background, so right/leftside text will be more visible on the background of other:

gantt.templates.rightside_text = function(start, end, task){
   var css = "some-background-class";
  return `<div class=${css}> remaining days ${task.text} </div>`;

Also, you can create some additional logic display rightside text only for selected/dragged tasks, using onTaskSelect and onTaskDrag events:

gantt.templates.rightside_text = function(start, end, task){
    var css = " ";
      css = "selectedBG"
      css = "unselectedBG"

  return `<div class=${css}> remaining days ${task.text} </div>`;

Like in this demo:

Or you can disable “right/leftside” text for “split” tasks, like in the following demo:

Or you can fully disable it of split tasks, and use tooltip/quick_info instead of it.

Quick info:

Please, do not post the same question in different places, thanks.


Sorry for the double post, you can delete this thread, as I’ve seen and responded directly on the rightside_text page.