Search code examples
javascriptjquerytwitter-bootstraphandsontable

Initial handsontable view does not stretch to correct width

I have a handsontable object (in fact two objects, both in a bootstrap modal) that have data loaded after the page is built. Here's a jsfiddle that duplicates the problem https://jsfiddle.net/mtbdeano/w7dofbyy/

The tables are sized way too narrow, even given the stretchH: all option. Once I click in the content, they resize like magic to the correct column width. Am I missing some initialization parameter? How can I have it size to the correct width after loading new data?

  /* these tables are in the modal */
  $('#keyword_table').handsontable({
    data: keyword_data,
    rowHeaders: true,
    colHeaders: ['Keywords'],
    columnSorting: true,
    contextMenu: true,
    height: 256,
    stretchH: "last",
    enterBeginsEditing: false,
    minSpareRows: 1
  });

I am loading the data using this code which is called on a successful ajax call:

function load_table_from_ajax(tbl, data) {
  var $tbl = $(tbl);
  var hot = $tbl.handsontable('getInstance');
  // this formats my data appropriately
  var new_data = _.map(data, function (kw) {
    return new Array(kw);
  });
  hot.loadData(new_data);
  /* I have tried also doing a: hot.render(); */
}

All the code looks correct as per tutorials, any idea why the table doesn't stretch/resize correctly?

Before interacting with the Handsontable, it looks like this: Table is not rendered correctly but after clicking the header or adding a value: enter image description here

Solution

  • Try giving a width on initialization. Since you're not setting it, the stretchH might be having trouble doing the calculations it needs. I've seen that behavior before and setting this usually fixes it.