Why does Chrome show an extra line when using google org chart?

Question

I use Google org chart and it works great in every browser except Chrome. In Chrome, I see these extra lines between fields as follows:

For all other browsers, the same page is displayed:

As you can see, there are no blue lines between the nodes. When I look in firebug or chrome dev tools, it looks like this:

.google-visualization-orgchart-node border: 2px solid #b5d9ea; 

This causes a problem because if I change the border to 0px, the problem disappears (but the border on the actual nodes also disappears, which is obviously the problem.

Any suggestion on how to do this correctly in Chrome. I do not see this problem occurring in the demo link above.

Answer 1

 .google-visualization-orgchart-linenode { border: 0; } 

Answer 2

In my case, it was Bootstrap 3 with

 border-collapse: collapse; 

That was the reason. Fixed with setting

 table.google-visualization-orgchart-table { border-collapse: separate; } 

Answer 3

Check if any border rule applies for this class css .google-render-OrgChart-linenode

Answer 4

I would ask Patrick to respond to the installation of .google-visualization-orgchart-linenode {border: 0} . If this does not work, try setting the border-collapse property, as it is separately by default .

 .google-visualization-orgchart-table, .google-visualization-orgchart-table tr, .google-visualization-orgchart-table td { border-collapse: collapse; } 

Although it is strange that its only display in Chrome is for you. Make sure your DOCTYPE setting is correct .

Answer 5

Set the nodeClass parameter in the diagram. draw with color and background color to override the default color scheme, which solves the problem in Chrome.

Define two css classes:

 //css class for default tree node .default-leaf { color:black; background-color:#DCDCDC; } // css class for selected tree node .selected-leaf { color:white; background-color:#191970; } 

During chart initialization, set the nodeClass and selectedNodeClass parameters:

 var chart = new google.visualization.OrgChart( document.getElementById('chart_div')); // setting options - allowHtml (required for visuals to work), css classes for a tree-node & selected-tree-node var options = { 'allowHtml': true, 'nodeClass': 'default-leaf', 'selectedNodeClass': 'selected-leaf'}; chart.draw(data, options); 

Answer 6

This is what I added to stop random strings from appearing.

 <style> table{ border-collapse: separate !important; } </style> 

Answer 7

We had an incompatibility with normalize.css, which caused the same problem for us. Adding the following CSS has been fixed:

 table.google-visualization-orgchart-table { border-collapse: inherit; } 

Answer 8

I also added the following to fix the problem:

 table { border-collapse: separate!important; }