How to stop a repeated column on a mobile as you scroll left or right

How to stop a repeated column on a mobile as you scroll left or right

eve.feve.f Posts: 4Questions: 1Answers: 0

https://datatables.net/extensions/fixedcolumns/examples/styling/bootstrap4.html

I am using the form that is on the page above, but when i use it on a mobile. When you scroll right, the first column stays put but also repeats as you dragged it out. i have attached an image to show what i mean. If anyone could help that would be great.

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    I just tried it here, and it worked okay for me. The page you took the screenshot of doesn't match the link - it's not Bootstrap 4.

    Please could you take a look and see if you're seeing it on that page, or link to the one that is demonstrating the issue (I tried them all without seeing the issue),

    Colin

  • eve.feve.f Posts: 4Questions: 1Answers: 0
    edited June 2020

    It is the correct link, i just didn't take the screenshot from the top of the page. The problem doesn't appear when using a laptop, only when using a mobile device. I am also holding the screen right in order to take the screenshot. I was just wondering if this is meant to happen?

  • kthorngrenkthorngren Posts: 21,172Questions: 26Answers: 4,923

    I clicked the link you posted on my phone (iphone) and don't see the problem. As Colin noted the link you posted doesn't match the screenshot. The screenshot is not displaying a Bootstrap styled Datatable.

    Please confirm the link you posted shows the problem or provide the link of a page that does. Also provide details of the mobile device you are testing with.

    Kevin

  • eve.feve.f Posts: 4Questions: 1Answers: 0

    I checked the link again and it is the same as what i have a screenshot of, the screenshot below shows the link alongside the correct page. It only appears when i drag across right, i have tried in both on an ipad and an iphone and im getting the same as shown in my first screenshot. I know its not a massive problem but was just given as some negative feedback from a user so was just trying to see if there is a way of preventing this. Thanks again.

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Yep, that's BS4 - you'll see there's a difference between the arrows at the column's headers.

    I see that on iOS - if I pull to the right the column is duplicated, but as soon as I release, the table snaps in as expected. Is that the same as you're seeing, or does it always stay duplicated?

    Colin

  • eve.feve.f Posts: 4Questions: 1Answers: 0

    Yes i am seeing the same thing, it only duplicates when i pull to the right. Is there anyway to stop this from happening or even why it is duplicating?

    Thanks,
    Eve

  • allanallan Posts: 63,212Questions: 1Answers: 10,415 Site admin

    Hi Eve,

    Unfortunately no - what you are seeing is caused by the iOS overscroll. The way FixedColumns works is that the original column just has a duplicate laid over it, so finally it appears fixed. That is a problem on iOS (and no where else) since it allows negative scrolling. I haven't found a way to disable that ability (I suspect there isn't one), so there isn't much we can do about it I'm afraid.

    As Colin says, as soon as you release, it should snap back to looking correct as the original table slides back across and under the fixed column.

    Allan

This discussion has been closed.