Make resizing tools hidden?


I already know it’s possible to prevent a task from being resized. I’m wondering if it’s possible to remove the little side draggable things when you hover over a task. I want to do this on a task by task basis, making some resizable and some not, with the non-resizable ones not having the draggable resizers at all.


Unfortunately, there is no built-in way to set the draggable resizers to specific tasks. One of the options is to add a custom property to the non-resizable tasks and add a certain CSS class that will hide the draggable resizer when you hover on the required task.
You can use task_class template to add a CSS class to the tasks: ;
So to the specific tasks it might look like:

gantt.templates.task_class = function(start, end, task){
        return "non-resizeable";
    return "";

To hide the draggable resizer, you need to apply display: none to these CSS classes:

    .gantt_task_line.non-resizeable .gantt_task_drag , 
    .gantt_task_line.non-resizeable:hover .gantt_task_drag {
       display: none; 

Please check the following example:


Worked like a charm, thank you!