HandsonTable in IE11 Does Not Render Data Columns Lined Up with Header Columns

Tags: #<Tag:0x00007efc62205fe8> #<Tag:0x00007efc62205e58>
#1

I developed my web app using Handsontable in Chrome. It was fun and worked well.

But now I am trying to get it to work in IE11 and it has significant rendering issues.

The first, and the subject of this question is that the actual width of the grid does not match up with the headers. Here is an image:

width in IE is messed up

I can get it close to working by adding this style to my app:

.wtHolder {
    width: 100% !important;
}

But they still don’t line up correctly and it seems a bit of a hack to have to do an !important on an handsontable class.

Is there a way to get this to look right in IE11?

Additional Info:

When I create this handsontable instance, I am setting the following options:

createOptions(): ht.Options {
    let options: ht.Options = {};

    options.data = this.tableData;
    options.colHeaders = true;
    options.colHeaders = this.columnHeaders;
    options.colWidths = this.columnWidths;
    options.stretchH = 'all';
    options.columns = this.columnMappings;
    options.minSpareRows = this.minSpareRows;
    options.readOnly = this.isReadOnly;

    return options;
}

The source of this error seems to be this:

Chrome:

 <div class="wtHolder" style="position: relative; width: 646.825px; height: 150px;">

IE:

 <div class="wtHolder" style="width: 41.66%; height: 150px; position: relative;">

In Chrome an actual pixel width is calculated. In IE a percentage is calculated. And the percentage is very wrong.

#2

This style seemed to fix this issue:

/*IE11 does not display widths correctly.  This fixes that error.*/
.wtHolder {
    width: auto !important;
}
#3

Thank you for the effort to share the example, description and the workaround @hansontableschaff

I’ll mark this issue to be reviewed by our developers.

#4

I have had endless issues with Hot’s rendering, wtHolder and others, developing under IE 11. Does this mean that the choice to output the width as pixels versus percentages is in Hot code which looks at browser type?

Because if so, I strongly doubt whether the Hot team have looked at that code since IE 11/HTML5? I now usually find IE 11 behaves itself as HTML5 and do not have to make differences between it and Chrome/Firefox in my own code. I am fearing that Hot code might be full of old-IE stuff which is no longer appropriate…?

#5

@hansontableschaff
When you say “IE11 does not display widths correctly” , do you mean IE gets something wrong itself, or (as I thought you meant when you wrote “And the percentage is very wrong”), IE is displaying that percentage, but Hot code is calculating an incorrect percentage to use only in IE?

#6

Just that when I ran it in IE, it did not look right. I attached the image of what was wrong to my original question.

#7

Was having this same issue in IE11 and the fix above worked as described. That said, during further testing we found that if you have frozen columns and enough rows to cause handsontable to scroll vertically, you would get two scrollbars. One on the far right as you would expect, and another just to the right of the frozen columns. Fixed it with the following duct tape hack. Would love feedback if anyone sees an issue with this or has a better idea.

        /*IE11 does not display widths correctly.  This fixes that error.*/
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
    {
    .wtHolder {width: auto !important;}
            
    .ht_clone_left .wtHolder {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    width: auto !important;
    }

    }
#8