Fixed column scrolls to top on select/deselect

croshad

Hello,

i inherited a project with a Datatable (server side, PHP) and there is a bug i'm unable to solve. The table has a fixed left side column and whenever you select or deselect a row, the fixed column scrolls to top. Scrolling the table resets/fixes it. Can someone tell me where to look to figure it out ?

It uses JSZip 2.5.0, DataTables 1.10.18, Buttons 1.5.4, Column visibility 1.5.4, HTML5 export 1.5.4, ColReorder 1.5.0, FixedColumns 3.2.5, FixedHeader 3.1.4, RowGroup 1.1.0, RowReorder 1.2.4, Scroller 1.5.0, Select 1.2.6.

Thanks!

colin

That's not standard behaviour, so it's going to be something specific to your implementation. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

croshad

Hi,

thanks for the response. I extracted a piece of the table for a test example as i cannot provide access to the live version but the issue is still present https://motive.hr/dtb-test/ . It seems to happen when you scroll down past the middle mark, the more rows you display, further down you have to scroll to get the bug. The live table has several columns with buttons, like the ones in the example (all are same height) and when you remove those columns, all seems well, so it's obviously tied to the height calculation.
My idea is to apply to the select/deselect event whatever is syncing the column when you do a scroll, i'm just not sure what it is

Thanks in advance for looking into it!

colin

I'm not sure, but I suspect it might be related to this code:

      'drawCallback': function (settings) {
        $('div.dataTables_scrollBody').scrollLeft(scrollPosX);
        $('div.dataTables_scrollBody').scrollTop(scrollPosY);
      },

Could you try commenting it out just to see if it makes a difference.

Also, your line

select: true

isn't needed as you're defining the Select extension on the line beneath,

Colin

croshad

Thanks for the reply. I tried it, didn't help. The original table is very wide, so the purpose of that i guess is to save the position on page reload. It's a weird interaction, it only happens when those buttons are setting the row height and only on select/deselect events and only when the table is near the bottom of the scroll and scrolling the table syncs the fixed column again...

I'm trying to figure out what syncs the column to the table after a scroll event and then get that to trigger on select/deselect.

allan

Hi,

Thanks for trying Colin's suggestions. Could you update to the latest versions of the software please?

For example you are using DataTables 1.10.18 and FixedColumns 3.2.5, while 1.10.23 and 3.3.2 are both available.

This is the script and link tag to try for the latest versions:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sl-1.3.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.23/b-1.6.5/b-colvis-1.6.5/b-html5-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sl-1.3.1/datatables.min.js"></script>

Allan

croshad

Hi guys, sorry for the late response, was away few days. Yea, the new version fixed the issue. Though, now there is a 1px offset on Firefox but that's a minor inconvenience. I'll try to implement the new version on the live table and hopefully nothing else breaks.

Thanks a lot for the help!