Fixed columns on mobile shows original columns underneath when scrolling horizontally

datatablesuser2020

Hi there,

I noticed when accessing this example on ios 13, you can still see the original columns underneath the fixed one
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html

I was wondering if there was a way to ensure that when you scroll horizontally and pull right that the original columns don't appear underneath

One way I was thinking was to make the a css style to color the dataTables_scrollBody cells transparent for the columns that correspond to the fixedcolumn ones

colin

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

Dragging left to right on ios 13.3 iphone 8

datatablesuser2020

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

https://s173.convertio.me/p/4k49d0Exs9ACWClgAg_4zg/cd2f21baa5fb149bc87ed458ef549a66/FullSizeRender.gif

datatablesuser2020

Just wondering if anyone else can confirm the test case that I provided on their mobiles?

colin

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

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

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

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

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

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

Allan

datatablesuser2020

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

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.