Initial handsontable view does not stretch to correct width

Question

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: but after clicking the header or adding a value:

Answer 1

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.

Answer 2

try colWidths:[100]

Defines column widths in pixels. Accepts number, string (that will be converted to number), array of numbers (if you want to define column width separately for each column) or a function (if you want to set column width dynamically on each render).