Changing CSS used by gantt in two different components

Gantt
#1

Hi,

I know that the Gantt is a static object for DHTMLX.
However, is it possible to load different CSS files when loading in two different components?

Example:

Component1.css :

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

Component2.css:

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

I’ve tried and have no luck. Both components are only behaving using the CSS of component 1

#2

Hello,
If you want to set custom CSS rules for different Gantt instances, you can use the container ID in the selectors:

#gantt_here1 .gantt_task_line, #gantt_here1 .gantt_line_wrapper {
    margin-top: 0px;
}

#gantt_here2 .gantt_task_line, #gantt_here2 .gantt_line_wrapper {
    margin-top: -10px;
}

Here is an example of how it works:
http://snippet.dhtmlx.com/5/543142a47

But unfortunately, that won’t work if you want to have different skins. In that case, you need to manually edit CSS files and specify the Gantt container for each style rule.

1 Like
#3

Hello @ramil,

Thank you! I tried this and it works. But now I’m thinking of getting the enterprise one for multiple instances. reseting the static gantt every time is just sad.

#4

Hello,
Thank you for the positive feedback.

Starting from the 7.0 version, all extensions are included in the dhtmlxgantt.js file, so it is possible to have different extensions for several Gantt instances.
For example, enable auto-scheduling and tooltip only for the first Gantt instance and multiple task selection with the Quick Info only for the second Gantt instance:
http://snippet.dhtmlx.com/5/469868442
So, if you have several Gantts on the page, now it is more convenient to customize them.