Row header height could not be aligned when using "<br>" in tab panel

Tags: #<Tag:0x00007efc706c7578> #<Tag:0x00007efc706c7370>
#1

Hi,

I have a tab panel which contains a handsontable in each tab. when rendering the table in all tab that not the first tab, the row header height could not be aligned when using “
” in the column header as shown below:

image
image.png772×378 25.2 KB

For the first tab one, it totally normal:

image
image.png1290×456 36.3 KB

For you info, all tables are onload when starting the page by triggering render action on bootstrap tab :
document.querySelector(’.nav-tabs’).addEventListener(‘click’, function () {
setTimeout(function () {
hot.render();
roadshow.render();
store.render()
}, 5)
});

Could please advise how to fix the issue? Thanks.

#2

Hi @anderson.lee

Thank you for contacting us. Please, send a code demo representing your current implementation so we can determine what is the source of this issue.

#3

Hi @adrian.szymanski,

HTML, the issue happen only in the tab which in not active one:

Hot1 Hot2 Hot3
...
Store List Detail*   
...

JavaScript, for hot1 and hot2 are same code as hot3:

var jsonData2 = $("#StoreListJson");

storeListData = eval(jsonData2.val());

var container2 = document.getElementById(‘storeList’);
var hot3 = new Handsontable(container2, {
data: storeListData,
rowHeaders: true,
autoColumnSize: true,
colHeaders: [‘Store’, ‘Display Index’, ‘Segmentation -
Demography / Customer’],
//contextMenu: true,
allowInsertRow: true,
// minSpareRows: 1,
width: ‘100%’,
height: ‘700px’,
className: ‘htLeft’,
autoWrapRow: true,
colWidths: [100, 150, 350],
formulas: true,
columnSorting: true,
filters: true,
dropdownMenu: true,
columns: [
{
},
{
},
{
}
],
licenseKey: ‘non-commercial-and-evaluation’
});

document.querySelector(’.nav-tabs’).addEventListener(‘click’, function () {
setTimeout(function () {
hot1.render();
hot2.render();
hot3.render()
}, 5)
});

#4

@anderson.lee

I am not able to reproduce the issue with the code you provided. Please modify this example so the issue can be replicated here: https://jsfiddle.net/handsoncode/r2vjnL3s/

#5

Hi @adrian.szymanski,

I tried it in your URL, cannot simulate the case that happened in my environment. Not sure is bootstrap version issue.

HTML:

Hot1 Hot2 Hot3
Store List Detail*   

Javascript:
const container1 = document.querySelector(’#hot1’);
const container2 = document.querySelector(’#hot2’);
const container3 = document.querySelector(’#hot3’);

const hot1 = new Handsontable(container1, {
data: [
[‘Tesla’, 2017, ‘black’, ‘black’],
[‘Nissan’, 2018, ‘blue’, ‘blue’],
[‘Chrysler’, 2019, ‘yellow’, ‘black’],
[‘Volvo’, 2020, ‘white’, ‘gray’]
],
rowHeaders: true,
autoColumnSize: true,
colHeaders: [‘Store’, ‘Display Index’, ‘Segmentation - Demography / Customer’],
allowInsertRow: true,
width: ‘100%’,
height: ‘700px’,
className: ‘htLeft’,
autoWrapRow: true,
colWidths: [100, 150, 350],
columnSorting: true,
filters: true,
dropdownMenu: true,
columns: [
{},
{},
{}
],
licenseKey: ‘non-commercial-and-evaluation’,
});

const hot2 = new Handsontable(container2, {
data: [
[‘Tesla’, 2017, ‘black’, ‘black’],
[‘Nissan’, 2018, ‘blue’, ‘blue’],
[‘Chrysler’, 2019, ‘yellow’, ‘black’],
[‘Volvo’, 2020, ‘white’, ‘gray’]
],
rowHeaders: true,
autoColumnSize: true,
colHeaders: [‘Store’, ‘Display Index’, ‘Segmentation
- Demography / Customer’],
allowInsertRow: true,
width: ‘100%’,
height: ‘700px’,
className: ‘htLeft’,
autoWrapRow: true,
colWidths: [100, 150, 350],
columnSorting: true,
filters: true,
dropdownMenu: true,
columns: [
{},
{},
{}
],
licenseKey: ‘non-commercial-and-evaluation’,
});

const hot3 = new Handsontable(container3, {
data: [
[‘Tesla’, 2017, ‘black’, ‘black’],
[‘Nissan’, 2018, ‘blue’, ‘blue’],
[‘Chrysler’, 2019, ‘yellow’, ‘black’],
[‘Volvo’, 2020, ‘white’, ‘gray’]
],
rowHeaders: true,
autoColumnSize: true,
colHeaders: [‘Store’, ‘Display Index’, ‘Segmentation - Demography / Customer’],
allowInsertRow: true,
width: ‘100%’,
height: ‘700px’,
className: ‘htLeft’,
autoWrapRow: true,
colWidths: [100, 150, 350],
columnSorting: true,
filters: true,
dropdownMenu: true,
columns: [
{},
{},
{}
],
licenseKey: ‘non-commercial-and-evaluation’,
});

document.querySelector(’.nav-tabs’).addEventListener(‘click’, function () {
setTimeout(function () {
hot1.render();
hot2.render();
hot3.render()
}, 5)
});

#6

Hi @anderson.lee

I understand. Unfortunately, without the demo in which the issue can be replicated I can’t do much. Please, update us when you will be able to prepare a demo with the reproduction of the issue.

#7

Hi @adrian.szymanski,

May I know which version of handsontable is using in URL: https://jsfiddle.net/handsoncode/r2vjnL3s/
?

I am using 8.2:
image

Not sure that the root cause whether is from different version.

#8

Hi @anderson.lee

The latest version of Handsontable is used in this example, which is 14.3.0.

#9

Hi @adrian.szymanski,

Updated to the latest version, the issue is fixed, thanks.

#10

Hi @anderson.lee

Thank you for the update and I’m glad that the issue is now solved. I will close this topic now.

#11