Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2020

  I just tried this on an iPad with 13.3.1 and it's working as expected for me. Are you able to post a screenshot or photo of the issue so we can see what you mean, please.

  Colin
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020

  Dragging left to right on ios 13.3 iphone 8

  
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020 edited February 2020

  Added a video demonstrating it
  https://we.tl/t-nEKBgTLy5o

  https://s173.convertio.me/p/4k49d0Exs9ACWClgAg_4zg/cd2f21baa5fb149bc87ed458ef549a66/FullSizeRender.gif
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020

  Just wondering if anyone else can confirm the test case that I provided on their mobiles?
• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2020

  I did see that when I first looked, but didn't register that the motion was a problem. I've passed it onto Allan (I tend to triage the forum) and he'll get back shortly. Thanks for the videos and extra information, that did help.

  Colin
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  February 2020

  Yes - thanks for the video! It looks like the issue is with the overflow to the top when scrolling up due to iOS's "bounce". The fixed column and body are two different scrolling containers using Javascript to keep the two insync.

  As you drag around the body container you can cause it to "bounce" at the top. But the bounce can't be scripted - iOS just reports scrollTop as 0 for that, so it can't be matched in the fixed column.

  I'm afraid that there isn't much we can do about this due to the way iOS scrolling works.

  Allan
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020 edited February 2020

  Thanks for confirming guys

  So while I understand that the vertical bounce issue will be there, what about just scrolling horizontally (without the vertical bounce issue, which I exaggerated in the video), I thought if I just horizontally scroll, it shouldn't show the underneath columns?
  Or is the horizontal issue present because of the vertical bounce issue?

  Someone else reported this issue before too I think
  https://datatables.net/forums/discussion/37122/fixed-columns-in-iphone-makes-an-overscrolling-of-the-body-table

  I've seen sites like https://www.nba.com/standings that have a scrolling table but maybe they use a different implementation?
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  February 2020

  Ah I see. The issue is again the iOS bounce scroll allowing negative scrolling. The way the FixedColumns work is that it overlays a clone of the first (or however many are fixed) column, giving the visual appearance of the column being fixed. Unless negative scrolling is possible, which it is in iOS....

  I don't have an immediate answer for that I'm afraid. If there is a way to disable the bounce / negative scroll in iOS then that would be the best option, but I'm not aware of such an option?

  Allan
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020 edited February 2020

  The only thing I’ve seen before are projects like noBounce and iNoBounce

  https://github.com/timbartsch/no-bounce/blob/master/README.md

  https://github.com/lazd/iNoBounce/

  Horizontal scroll patch
  https://github.com/lazd/iNoBounce/pull/36

  I’m not sure if it will help in this situation or not just a suggestion
• allan Posts: 63,531Questions: 1Answers: 10,475 Site admin

  February 2020

  Thanks - we might be able to utilise the technique they are using there. I've added it to our list .

  Allan
• datatablesuser2020 Posts: 7Questions: 1Answers: 0

  February 2020

  For those that are interested, I managed to work around the issue (but definitely not the final solution)

  Basically I added a callback to datatables draw event

  "drawCallback": function (settings, json) {
              setTimeout(function () {
                  $('#my-table').addClass("table-loaded");
              }, 2000);
  
          },
  

  Unfortunately I had to use a timeout here because fixedColumns waits for the init event to fire and there are no callbacks sent by fixedColumns I believe?

  This then allowed me to add a class to the table. Then in my css I used opacity to hide the columns

  .loaded.dataTable td:nth-child(1) {
              opacity: 0;
          }
  
          .loaded.dataTable td:nth-child(2) {
              opacity: 0;
          }
  

  For now it's just a little hack.
• Carluccio Posts: 8Questions: 3Answers: 0

  August 2021

  If you are using bootstrap, you can also use sticky class to fix columns.
  It may not be compatible with older browser, but this is not a big issue.