How do I fix rendering issues when Handsontable loaded in Bootstrap tab?

[pfe...@gmail.com]

I'm having a few issues with Handontable behaving if is not visible by default (in a tab tha isn't opened)
Whent he tab is opened:
- Incorrect alignment of row numbers and row cells (Not adjusting for auto height on cell content that is taller)
- Only first row rendered until table clicked

However if I load this tab as the initial table handsontable renders correctly

Using Handsontable 1.1.1. Bootstrap 3.3.5

Example initialisation (in document.ready() )

trial_result_container.handsontable({
startRows : 6,
startCols : num_columns,
colHeaders : column_headers,
/*stretchH: 'all',*/
colWidths: column_widths,
rowHeaders : true,
contextMenu : true,
columns : column_types,
/*filters:true,*/
width: function(){

$('#trial_project_form').width()
},


/*fixedColumnsLeft: num_locked_columns,*/
manualRowResize: true,
manualColumnResize: true,
autoRowSize:false,
/*autoColumnSize: true,*/
/*headerTooltips: true,*//**THROWS ERROR : TH.parentNode is null*/
tableClassName: ['table', 'table-hover', 'table-striped'],
minSpareRows : 20,

afterChange: function (change, source) {

if (source === 'loadData') {
return; //don't save this change
}

if(change[0][2]!=change[0][3]){
//Show save message
unsaved_data = true;
}
},


afterRemoveRow: function (change, source) {

//Show save message
unsaved_data = true;

}
});

[pfe...@gmail.com]

Example screenshots:
Render issue 1 - Tab not visible on first load- Only 1 column rendered
Render issue 2 - Click table - draws columns - but cell height mismatched to row number height
Correct render- Tab visible on first load - rendered correctly

https://drive.google.com/open?id=0B9HpJr3WH9u6TUttaFcwN3JpRzQ