Dynamically change task line and links (arrows) margin

Gantt
#1

I want to dynamically add new task layer bellow the task line and be able to shift the task lines and links (arrows) towards the top of the row when the task layer is added and then put them at their original position when the task layer is removed.

If i hard core the following css modification

.gantt_task_line, .gantt_line_wrapper {
      margin-top: -9px;
}

.gantt_task_link .gantt_link_arrow {
     margin-top: -12px
 }

it works but later when i remove the dynamically added taskLayer and change the style with javascript when i call the render() function the gantt updates itself with the hard coded css styles.

10x in advance.

#2

Hello,
It is possible to use custom styles for the tasks with layers. In gantt.templates.task_class you check if the layer should be displayed and return a custom CSS rule in that case. Here is an example:
http://snippet.dhtmlx.com/5/2cdeeb50e

You can read more about it in the following articles:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html
https://docs.dhtmlx.com/gantt/api__gantt_link_class_template.html

#3

Thanks for the reply but i asked how to dynamically remove and add the new layers and justify the task back to the vertical center of the row. (When i add a new task layer the original task layers needs to move a little bit upper towards to to of the row. Then when i click a button and remove the baseline task layer then the original task should be again at the vertical center of the row)

#4

Hello,
You can add new layers and remove them in the lightbox:
https://files.dhtmlx.com/30d/0bdd386c627e5070a63602b13160af94/vokoscreen-2018-11-01_12-42-39.mkv
The solution I suggested doesn’t push the task. Instead, it decreases its height.
If you want to push the task without decreasing its size, you need to change the task row height, get each link that comes to the task and return different class for that link. However, there is no perfect solution for links. For example, you create a link from the task without task layers to the task with task layers. Those tasks have different CSS rules, but there is only one link and it is not possible to apply different rules to one object.
Here is the snippet:
http://snippet.dhtmlx.com/ad404df2c