Deano Deano - 4 months ago 30
Javascript Question

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

Answer

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.