Rightside_text overlapping when parent has renderer set to 'split'

Gantt
#1

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:

https://snippet.dhtmlx.com/5/97e2be2b0

Any ideas of how I can approach/fix this?

#2

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 = " ";
    if(task.selected)
      css = "selectedBG"
    if(!task.selected)
      css = "unselectedBG"

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

Like in this demo:
http://snippet.dhtmlx.com/5/18f57b5a5

Or you can disable “right/leftside” text for “split” tasks, like in the following demo:
http://snippet.dhtmlx.com/5/68fd8b846

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

Tooltip:
https://docs.dhtmlx.com/gantt/desktop__tooltips.html
Quick info:
https://docs.dhtmlx.com/gantt/desktop__quick_info.html

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

#3

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