Deano Deano - 1 year ago 120
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

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 */
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 =, function (kw) {
return new Array(kw);
/* 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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download