Misaligned columns in Microsoft Edge

fulmar

Hello,
I am finding a significant (more than the 1-2 pixels which are common in IE10+) misalignment of columns using Microsoft Edge, while not happening in Chrome, Firefox and IE 11.

Example:
https://jsfiddle.net/fulmar/48835jg6/9/
Adjust table frame to be around 1000px to best show misalignment.

Some observations:
- misalignment seems to be most common when header text starts to wrap
- once x-scroll appears, misalignment occurs less
- forcing the header to not wrap (by using white-space: nowrap), while it works, is not an option as this often makes columns take up excessive space

(Example modified from https://jsfiddle.net/rbeasse/26hygack/), which was used as an example for existing issue https://github.com/DataTables/DataTables/issues/893))

john_l

Hello, is there any update on the cause of this issue (or a possible fix) ?

As well as the github link above (remove the trailing brackets from the url to get it to work), the issue is also reported here: https://stackoverflow.com/questions/46909215/data-table-column-misalignment-in-edge

I've been trying various things to get it to work in my case as I need wrapping enabled in some columns, but nothing I've tried so far has worked. I'm still using 1.9.4 due to extensive customizations that would take a lot of work to port to a newer version, so I know I'm probably unlikely to see a code fix, but I was hoping for some insight into the cause, which might point me to a workaround I could use.

What I see is that the headers drift out of position when the data cells contain wrapped content. fnAdjustColumnSizing has no effect, and even some javascript that just runs through the columns, setting the header cell widths to the same as the data cells fails - the headers won't resize to the values I set, which is presumably why the issue is happening. It seems that Edge wraps the data cells differently - giving them more space than is available for the header due to the content in the other header cells. Is some part of fnAdjustColumnSizing failing in Edge?

With more users on using Edge, this is becoming more of an issue for me, so any hints welcome...

I'd love to post a simplified example of my particular issue, but that would take a lot of time to prepare as it's all intranet only currently, so I'm hoping the examples linked above give enough insight to help.

Thanks.

allan

I'm afraid that 1.9.4 is no longer supported at all, particularly without a test case (sorry). What I would suggest is making sure that you don't have border-collapse: collapse enabled on the table, make sure it does have width="100%" (or style="width:100%") on the table.

There has been a lot of work in this area since 1.9.4 so I'm not surprised that it isn't working perfectly there. Sub-pixel calculations might be what is throwing it off, I'm not certain.

You'd probably need to modify the DataTables code to have it not remove the calculation table it creates so you can inspect that and see where it deviates from the table that is actually draw.

Allan

kjhangiani

We are experiencing the exact same issue on 1.10.15. I see there is a .16 release, but I cannot find a changelog to see if this would affect anything.

We use the datatable heavily in our app for rather complex datasets (with html / column text wrapping required), and the experience on edge is rather poor (even compared to IE11, which is surprising).

We are comfortable poking around in the datatable internals, however any insight into where the logic that causes this issue is in the codebase would be greatly appreciated.

kjhangiani

Just FYI, after some debugging, it looks like a small change to use min-width instead of width on the column resize largely fixes the problem. There's still some quirks and I am still testing, but it seems like min-width is much more reliable on Edge.

I added this line:

for ( var i=0 , iLen=columns.length ; i<iLen ; i++ )
            {
                columns[i].nTh.style.width = columns[i].sWidth;
                columns[i].nTh.style.minWidth = columns[i].sWidth;
            }

into _fnAdjustColumnSizing ( settings ) and the behavior is already MUCH better. I will experiment and see if this has any unintended consequences, but might be something to consider for a future release.

kjhangiani

I forked 1.10.15 and fixed this issue via this monkey-patch:

https://github.com/soxhub/Dist-DataTables/commit/05f15c553f863b063cb53c84c707899c458d1e10?w=1

We don't use footers in our datatable, but likely if footers are used there is an equivalent block of code that needs to be updated for the footer.

Will continue testing this and make a PR against master if all looks good, but just for reference the above code works very well for us - fixes the alignment issues in edge, and maintains parity in other browsers, including auto-resize on window resize

allan

Interesting! Thanks for your investigation into this!

Allan

ancosam

I had this problem when displaying the datatable in modal popup.
Fixed it by calling a function where the table was initializing through SetTimeout("functionname()", 300);