Google Org Chart Data Overflow Outside Of Div

I'm using Google Org chart for a project and the content of the chart is flowing outside of the containing div. The div is highlighted in red below. I would like the nodes of the c

Solution 1:

I did end up getting this to work, but not using an OrgChart call directly. I manually created each card by using a div and giving that div the class of

google-visualization-orgchart-node  google-visualization-orgchart-node-small

And setting each div to

display: inline-block

See final code below

google.load('visualization', '1', {packages: ['orgchart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var s = '<div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Mike</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Jim</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Alice</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Bob</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Carol</div';

    document.getElementById('chart_div').innerHTML = s;
}

I lost some of the OrgChart functionality, but achieves the look that the project required. Note that the OrgChart code still needs to be downloaded (I require it for other aspects of the project so it was already available.)

See fiddle of finished product http://jsfiddle.net/4eD4u/1/

Solution 2:

Looked at .table-responsive from bootstrap the applied same to OrgChart div, it stopped drawing outside and started showing a horizontal scrolling bar at bottom.

chart goes here:

 <div id="chart_div" class="chart_div"></div>

css:

.chart_div {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}