0

I have 2 tables with equal number of rows kept side by side to achieve the requirement of fixed first column (1st table at left side) & horizontally scroll-able rest of the columns (2nd table at right side). While onload, based on the content [label, image, textArea & etc] size in these table height of rows are getting adjusted to align between left and right.

This is achieved by comparing and assigning higher value offsetHeight of row to style.height of same table row and other table row.

for (x.rows) {
    if(x.rows[i].offsetHeight > y.rows[i].offsetHeight) {
        y.rows[i].style.height = x.rows[i].offsetHeight;
    }
}

This was working from IE6 to IE10 for many years and in IE11 we started seeing miss alignment issue. I have still not moved to standard complaint [still IE8 compatibility].

Further research and below like indicated offsetHeight calucaluation would differ. https://msdn.microsoft.com/en-us/library/ms534199(v=vs.85).aspx

So I got to change the code to below and issue fixed in my local machine IE11/Windows 8. x.rows[i].style.height = y.rows[i].style.height = x.rows[i].offsetHeight;

BUT, issue still exist in VDI [Virtual desktop infrastructure] machine IE11. I'm planning to try clientHeight instead of offsetHeight. What else do I need to try/look to solve this issue?

Note: Above code is just a sample to explain the problem & in actual finding and assigning height of row is separated to different loop to avoid reflow (improve response time).

Electric Coffee
  • 11,733
  • 9
  • 70
  • 131
Ayyappan S
  • 1
  • 1

1 Answers1

0

I have fixed this issue. Issue is only in then combination Win 7 SP1 / with IE11 - 11.0.9600.17959 or lower minor version. Issue was x table layout is fixed at the end (out side of loop) but Y is NOT. So added code to fix y layout and got all aligned. Also assigned first TD/cell height instead of TR/row.

Here is working code:

for (x.rows) {
if(x.rows[i].offsetHeight > y.rows[i].offsetHeight) {
    y.rows[i].cells[0].style.height = heights[i];
    x.rows[i].cells[0].style.height = heights[i]
}
}
y.style.tableLayout = "fixed";
x.rows[0].cells[0].style.width = x.rows[0].cells[0].clientWidth;
x.style.tableLayout = "fixed";
Ayyappan S
  • 1
  • 1