La vista iniziale del handstand non si estende per correggere la larghezza

Question

Ho un oggetto handstoble (in effetti due oggetti, entrambi in un modal bootstrap) che hanno i dati caricati dopo che la pagina è stata creata. Ecco un jsfiddle che duplica il problema https://jsfiddle.net/mtbdeano/w7dofbyy/

Le tabelle sono dimensionate in modo troppo stretto, anche in base all'opzione stretchH: all. Una volta che clicco nel contenuto, si ridimensiona come per magia alla larghezza della colonna corretta. Mi mancano alcuni parametri di inizializzazione? Come posso avere le dimensioni alla larghezza corretta dopo aver caricato nuovi dati?

/* 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 
    }); 

sto caricando i dati utilizzando il codice che è chiamato su un successo chiamata AJAX:

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(); */ 
} 

Tutto il codice è corretto come da tutorial, qualche idea del perché la tabella non allungare/ridimensiona correttamente?

prima di interagire con il Handsontable, sembra che questo: ma dopo aver fatto clic l'intestazione o aggiungendo un valore:

Answer 1

Provare a dare un width all'inizializzazione. Poiché non lo stai configurando, lo stretchH potrebbe avere problemi a eseguire i calcoli necessari. Ho visto questo comportamento prima e l'impostazione di solito lo risolve.

Answer 2

prova colWidths:[100]

Definisce la larghezza delle colonne in pixel. Accetta numero, stringa (che verrà convertita in numero), matrice di numeri (se si desidera definire la larghezza della colonna separatamente per ogni colonna) o una funzione (se si desidera impostare dinamicamente la larghezza della colonna su ciascun rendering).