Google Charts table ignoring width until paging

Question

I'm using Google Charts to display a paginated table.

When I load the page the table has a very small width and it resizes to the proper width only after the first paging.

I tried to set an explicit width and inspected the table element, The width property is set to the proper size but the table is still small on load.

There isn't anything special about the code, It's the same as the example in the playground:

https://code.google.com/apis/ajax/playground/?type=visualization#table_paging

Is there a way to force the table to resize to the set dimensions?

Thanks

Answer 1

This works fine to me:

$(window).on("resize", function () {
    draw();
}).resize();

and you must set width of table...

table.draw(data, {
 width:'100%',
 ...
});

Answer 2

For now I'm just setting the width again with $.width(),

But this doesn't seem like an optimal fix

Answer 3

Scripts:

<script type="text/javascript">
var visualization;
var data;

var options = {'showRowNumber': true};
function drawVisualization() {
  // Create and populate the data table.
  var dataAsJson =
  {cols:[
    {id:'A',label:'Name',type:'string'},
    {id:'B',label:'Height',type:'number'},
    {id:'C',label:'Coming',type:'boolean'},
    {id:'D',label:'Time',type:'timeofday'}],
  rows:[
    {c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]},
  {c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:[13,15,0,0],f:'13:15:00'}]},
  {c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:[15,45,0,0],f:'15:45:00'}]},
  {c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:[16,32,0,0],f:'16:32:00'}]},
  {c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:[19,50,0,0],f:'19:50:00'}]},
  {c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[18,10,0,0],f:'18:10:00'}]},
  {c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[13,15,0,0],f:'13:15:00'}]},
  {c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:[7,40,48,0],f:'7:40:48'}]},
  {c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:[6,0,0,0],f:'6:00:00'}]},
  {c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:[5,2,24,0],f:'5:02:24'}]},
  {c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:[6,14,24,0],f:'6:14:24'}]},
  {c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[5,45,36,0],f:'5:45:36'}]},
  {c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:[6,43,12,0],f:'6:43:12'}]},
  {c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:[6,14,24,0],f:'6:14:24'}]},
  {c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:[6,57,36,0],f:'6:57:36'}]},
  {c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:[13,12,0,0],f:'13:12:00'}]}]};
  data = new google.visualization.DataTable(dataAsJson);

  // Set paging configuration options
  // Note: these options are changed by the UI controls in the example.
  options['page'] = 'enable';
  options['pageSize'] = 10;
  options['pagingSymbols'] = {prev: 'prev', next: 'next'};
  options['pagingButtonsConfiguration'] = 'auto';

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  draw();
}

function draw() {
  visualization.draw(data, options);
}


google.setOnLoadCallback(drawVisualization);

// sets the number of pages according to the user selection.
function setNumberOfPages(value) {
  if (value) {
    options['pageSize'] = parseInt(value, 10);
    options['page'] = 'enable';
  } else {
    options['pageSize'] = null;
    options['page'] = null;  
  }
  draw();
}

// Sets custom paging symbols "Prev"/"Next"
function setCustomPagingButtons(toSet) {
  options['pagingSymbols'] = toSet ? {next: 'next', prev: 'prev'} : null;
  draw();  
}

function setPagingButtonsConfiguration(value) {
  options['pagingButtonsConfiguration'] = value;
  draw();
}

</script>

Html:

<div id="table" style="width:100%;"></div>

I m talking about above div container. If in your css file, there are css codes for table elements, It overrides the the google generated tables css.

Your custom table css codes affects the google tables, too.

Answer 4

The only solution that worked was giving the 100% width to the table via css:

.google-visualization-table-table{width: 100%}

Givin the width to the table in the option parameter at initalisation did only work with pixel values. And the other proposed solutions seemed not very elegant.