Answers

• john_l Posts: 45Questions: 0Answers: 12

  May 2018

  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 Posts: 61,665Questions: 1Answers: 10,096 Site admin

  May 2018

  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 Posts: 7Questions: 1Answers: 0

  May 2018

  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 Posts: 7Questions: 1Answers: 0

  May 2018

  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 Posts: 7Questions: 1Answers: 0

  May 2018

  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 Posts: 61,665Questions: 1Answers: 10,096 Site admin

  May 2018

  Interesting! Thanks for your investigation into this!

  Allan
• ancosam Posts: 1Questions: 0Answers: 0

  July 2018

  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);