Google Org Chart data overflow outside of div

Question

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 chart to move to the next line in the event it will flow outside of the div. (Alice would move to the next row and the data would continue.)

See my fiddle here

The result of what I have is:

And currently standard org chart data but without connections.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');
    data.addRows([
          [{v:'Mike', f:'Mike'}, '', 'The President'],
          [{v:'Jim', f:'Jim'}, '', 'VP'],
          ['Alice', '', ''],
          ['Bob', '', 'Bob Sponge'],
          ['Carol', '', '']
        ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    var options = {
        allowHtml: true
    };


    chart.draw(data, options);
}

Answer 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/

Answer 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;
}