Fixed columns on mobile shows original columns underneath when scrolling horizontally

Fixed columns on mobile shows original columns underneath when scrolling horizontally

datatablesuser2020datatablesuser2020 Posts: 7Questions: 1Answers: 0
edited February 2020 in Free community support

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • datatablesuser2020datatablesuser2020 Posts: 7Questions: 1Answers: 0

    Dragging left to right on ios 13.3 iphone 8

  • datatablesuser2020datatablesuser2020 Posts: 7Questions: 1Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • datatablesuser2020datatablesuser2020 Posts: 7Questions: 1Answers: 0

    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.

  • CarluccioCarluccio Posts: 8Questions: 3Answers: 0

    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.

Sign In or Register to comment.