Tree Plus/Minus Icon is not showing

Gantt
#1

Hello
I am using _ dhtmlx-gantt:6.3.2"_

Problem is tree plus/minus button is not showing. If I bring my mouse to the tree icon and click on it, it still works perfectly but I cannot see the Plus/Minus icon.
here is my column config:

gantt.config.columns = [
{name: “taskNumber”, label: “工番”, align: “center”, width: 90}, //tree:true,
{
name: “text”, label: “作業場所”, align: “left”, tree: true, width: 200, open: false
},
{name: “taskSubject”, label: “作業件名”, align: “left”, width: 400},
{name: “totalNumberOfPerson”, label: “延べ日数”, align: “left”, width: 60},
{name: “id”, label: “id”, align: “left”, width: 1}
];

I have also added import ‘dhtmlx-gantt/codebase/dhtmlxgantt.css’;
Everything works perfectly except the tree icon. What should I do?

#2

Hello @Mohaimanul_Islam,

I tried to reproduce the issue in gantt v 6.3.2, but tree icons displayed as expected, you can see it on the screenshot:

The issue could be connected with some custom styles, that you applied, so you can place ruleset for tree icons manually in your css, it looks so:

.gantt_tree_icon {
    width: 28px;
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
}

.gantt_tree_icon.gantt_close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAkUlEQVQ4T2NkoBJgpJI5DEPAoFOnTv0/c+YMQR+bmJgwmJmZwX2E4bVp06b9j4yMZODg4MBp2I8fPxiWL1/OkJWVNeIN4uTkxAin79+/M5AcRtgCHGQIyQbhijaiDQoKDmZgZ2PDGf0/f/1iWLd2LeHod3d3Z2BkYsJp0P9//xh27tyJ3yCqpWyCeQOHgsGX+wEZpW4T5LCxKwAAAABJRU5ErkJggg==);
    width: 18px;
    cursor: pointer;
}

.gantt_tree_icon.gantt_open {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAArklEQVQ4T2NkoBJgpJI5DEPAoFOnTv0/c+YMQR+bmJgwmJmZwX2E4bVp06b9j4yMZODg4MBp2I8fPxiWL1/OkJWVNUAGcXJyMnz//h3uQrJdRLFBIAPQAchlJLsIFuCMjIwM////B5sJMoRkg2CuIdtrQcHBDOxsbHBfCQgIMHz48AHO//nrF8O6tWsJR7+7uzsDIxMTznT0/98/hp07d+I3iGopm2DewKFg8OV+AJWkfRMrTobLAAAAAElFTkSuQmCC);
    width: 18px;
    cursor: pointer;
}

.gantt_tree_content, .gantt_tree_icon {
    vertical-align: top;
}

Unfortunately, I can’t say for sure what is going wrong, so, if it will not help, could you please send me a simplified demo with all necessary files/code, which I will be able to run locally and reproduce the issue?

1 Like
#3

Thank you for your reply. I have tried this code but still is not showing the icon.

I tried with this
.gantt_tree_icon.gantt_open {
background: green;
width: 18px;
height: 10px;
cursor: pointer;
}

and the background of the Icon area changes into green. I have also tried by changing the background image using
background: url("…/…/…/content/images/icon/icons8_plus_32px.png") no-repeat center
center;
but still, the Icon is not shown. One thing I forgot to mention, I updated the gantt version to 7.0.1 then again installed 6.3.2. Is it causing any problem?

#4

Hello @Mohaimanul_Islam,

Yes, some issues could have occurred if you are using a .css file from a different version of the gantt.
The only thing I can suggest for now is to download and install a clean version of gantt and check if there will be the same issue.
You can check the version of gantt in your app by printing gantt.version is the console:

#5

I have checked with the version of gantt 6.3.2 and 7.0.4 and the problem remains. I tried to add external icon but the icon is not shown. If I change the background color of .gantt_tree_icon.gantt_open it works perfectly.

#6

Hello @Mohaimanul_Islam,

Unfortunately, as I can’t reproduce the issue locally or find any information about similar issues I can’t tell what’s going wrong. It can be connected with some specific scenarios which I couldn’t test like: Operation System, Browser/Browser version, or something else.

Could you send me a demo, which I will be able to run locally and reproduce the issue?
Or you can give me a link to your project page, and I will try to research it there.

#7

I finally found what was causing the problem. I had added Content-Security-Policy which was stopping Gantt chart to load any Icons from the server. After updating the Content-Security-Policy the Gantt chart is working perfectly. Thank you for your time.