FixedHeader with scrollX - the headers are not moving/updating

FixedHeader with scrollX - the headers are not moving/updating

frenzy1frenzy1 Posts: 10Questions: 1Answers: 0

Hello,

Link to test case: http://live.datatables.net/wiqelema/5/edit
Description of problem:
When in small window/responsive mode and you can scrollX the table sideways - the fixed header is not moving/updating.

I have a similar situation where when I scroll sideways the fixed header will not move/update, but then if I scroll up/down it will fix the header in the position.

I have a rowspan=2 with multiple colspan columns.

Any idea on what to do to get it fixed ?

Thanks!

Answers

  • kthorngrenkthorngren Posts: 21,380Questions: 26Answers: 4,959

    Support for FixedHeader to support scrollX came in 3.2.1. You have 3.1.8 in the example. Updated the example to use the latest FixedHeader 3.2.1 and it looks to be working:
    http://live.datatables.net/zifohago/1/edit

    Kevin

  • frenzy1frenzy1 Posts: 10Questions: 1Answers: 0

    Thanks for the reply.

    In my project I did have the latest versions. So wondering what else could it be :neutral:

  • kthorngrenkthorngren Posts: 21,380Questions: 26Answers: 4,959
    edited February 2022

    I have a rowspan=2 with multiple colspan columns.

    Is this in the header or the tbody? These aren't supported in the tbody.

    If you are using a styling framework like Bootstrap make sure you have the proper JS and CSS integration files loaded. Use the Download Builder.

    If you still have problems please update the test case to show the issue.

    Kevin

  • frenzy1frenzy1 Posts: 10Questions: 1Answers: 0
            table = $('#dt-table').DataTable({
    /// config
    });
                $(document).on('mouseup', function(e) {
                    table.fixedHeader.adjust();
                });
                $(document).on('touchend', function() { 
                  $(document).trigger('mouseup');
                });
    

    I used this for the mobile version of my table to reset the header to the proper position - it's not perfect, but it works :smiley:

Sign In or Register to comment.