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:

can you post the jsfiddle? there may be something else wrong with your code. one thing you should try doing is defining the width of your actual table since you're not doing that here — ZekeDroid, Aug 14 '15 at 01:52

score 1 · Answer 1 · answered Sep 23 '15 at 19:18

1

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).

answered Sep 23 '15 at 19:18

FranciscoV

61
8

thanks @FranciscoV, this does indeed work, but I'd like this to be responsive to the size of the parent container. – Deano Oct 05 '15 at 16:42
it's not perfect or responsive, but it works, thanks! – Deano Oct 05 '15 at 18:53

score 1 · Accepted Answer · answered Oct 05 '15 at 17:59

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.

answered Oct 05 '15 at 17:59

ZekeDroid

7,089
5
33
59

thanks @ZekeDroid, hitting the HTML element with a width didn't help, but the column widths setting above did the trick. – Deano Oct 05 '15 at 18:52
1

Not the html element, but the initialization itself. In your initialization object. Also, I highly recommend creating an object rather than attaching it to jquery. This means doing `new Handsontable(container, options)` as opposed to `$(container).handsontable(options)`. – ZekeDroid Oct 05 '15 at 18:58
So you'd want to add `width: 100` or however many pixels you wanted – ZekeDroid Oct 05 '15 at 18:59
so yeah, *NOT* using the jquery selectors was the trick. it solved two other bugs as well. thanks for your help @ZekeDroid – Deano Oct 05 '15 at 20:51
no problem, the jquery selectors are a legacy feature that Handson is trying to phase out. – ZekeDroid Oct 05 '15 at 21:11
1

@ZekeDroid You should add your comment about the selectors as an actual answer. (It totally just fixed a similar problem I was having) – ThunderGuppy Feb 28 '17 at 16:25

Initial handsontable view does not stretch to correct width

2 Answers2