fixedheader-floating not align with table content datatable on scrolling Y

Rousseau · May 2020

Link to test case:

Debugger code (debug.datatables.net): var fixedHeader = new $.fn.dataTable.FixedHeader( table, {
headerOffset: $('header').outerHeight()
});
Error messages shown:
Description of problem: On windows y scrolling, the fixedheader-floating created is not normally align with the table content, sometimes is aligned correctly.

kthorngren · May 2020

The FixedHeader docs state this about using the Datatables scrolling features:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

This is likely why the header is not aligned.

Kevin

Rousseau · May 2020

My datatables doesn't have scrolling features, the scroll there is for the whole page (windows scroll).
But when I refresh the page, the duplicated thead is correctly align
But when I adjust the page from lg to xs, and I come back to lg, the thead is not aligned.

Here is my whole code

var table = $('#staff_list').DataTable({
        processing: true,
        responsive: true,
        ajax: {
            processing: true,
            url: "staff_ajax/",
            dataSrc: ""
        },
        columns: [
            {   // Responsive control column
                data: "Null",
                defaultContent: "",
                className: "control",
                orderable: false
            },
            {   // Checkbox column 
                data: "Null", 
                defaultContent: "", 
                orderable:false
            },
            { data: "fields.name"},
            { data: "fields.email"},
            { data: "fields.position"},
            { data: "Null", defaultContent: "<i class='cil-pencil'></i>"+
                                                "<div class='dropdown' style='display:inline-block; margin-left:10px;'>"+
                                                    "<i class='cil-options' data-toggle='dropdown' aria-expanded='false'></i>"+
                                                    "<div class='dropdown-menu dropdown-menu-right pt-0'>"+
                                                        "<a class='dropdown-item' href='#'>Archiver</a>"+
                                                        "<a class='dropdown-item' href='#'>Supprimer</a>"+
                                                    "</div>"+
                                                "</div>"},
        ],
        columnDefs:[
            { responsivePriority: 2, targets: 1 },
            { responsivePriority: 1, targets: 2 },
            { responsivePriority: 3, targets: -1 }
        ],
        select: {
            style: 'multi',
            selector: 'td:nth-child(2)'
        }
    });

and html code

<div class="row d-flex justify-content-center">
                <div class="col-lg-10">
                    <div class="card">
                        <div class="card-header"><i class="fa fa-align-justify"></i> Staff directory</div>
                        <div class="card-body">
                            <table class="table display nowrap table-bordered" cellspacing="0" style="width:100%" id="staff_list">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th data-priority="2"></th>
                                        <th data-priority="1">Name</th>
                                        <th>Email</th>
                                        <th>Position</th>
                                        <th data-priority="3"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer">
                        </div>
                    </div>
                </div>
            </div>

colin · May 2020

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

Rousseau · June 2020

Here the use case http://live.datatables.net/toyoguge/1/edit
But it's a whole app.
The matter is that the position of fixedheader-floting is not bound to the initial table parent

Rousseau · June 2020

I finished putting up the use case, here is the good link http://live.datatables.net/toyoguge/5.
When you reduce the size of the browser to xs, and you increase it directly to lg by clicking on the "enlarge" button of the browser, and you scroll down the window, you will see that the floating header fixed is not properly aligned.

colin · June 2020

Thanks for the test case. Unfortunately it's generating errors, so if demonstrating the issue. Please could you take a look and update it,

Colin

Rousseau · June 2020

Which errors please? http://live.datatables.net/toyoguge/5/edit

Rousseau · June 2020

Can you please screenshot the output you have?

colin · June 2020

Ah, yep, not seeing the errors any more. I'm also not seeing the header go all the way across, but I can get the columns misaligned - see here.

I've raised it internally (DD-1481 for my reference) and we'll report back here when there's an update.

Colin

Rousseau · June 2020

The problem remains
When you reduce the size of the browser to xs, and you increase it directly to lg by clicking on the "enlarge" button of the browser, and you scroll down the window, you will see that the floating header fixed is not properly aligned.

wiserweb · December 2020

Confirming this fixed header column alignment issue is still in the latest release of Datatables.

Would it be possible to obtain an update on this issue?

Thanks in advance.

colin · December 2020

That's still in the backlog I'm afraid, that issue hasn't been addressed,

Colin

tefdat · March 2022

I guess this isn't still fixed yet, due I have exactly the same issues.
Found a workaround, which fixes the mentioned issues. The visitors will see the column adjusting - but better than a broken column width respectively fixedHeader

   $(document).ready(function () {
        var scrolledOnce;
        $(window).on("scroll", function () {
            let scrollTop = $(this).scrollTop();
            if (scrollTop != 0) scrolledOnce = true;
            if (scrollTop <= 0 && scrolledOnce) {
                //top reached
                table.columns.adjust();
                //it seems fixedHead adjust not necessary
                //table.fixedHeader.adjust();
                scrolledOnce = false;
            }
        });
    });

@wiserweb, @Rousseau

colin · March 2022

Nice, thanks for posting

Colin

fixedheader-floating not align with table content datatable on scrolling Y

fixedheader-floating not align with table content datatable on scrolling Y

Answers

Howdy, Stranger!

Categories

DataTables

fixedheader-floating not align with table content datatable on scrolling Y

fixedheader-floating not align with table content datatable on scrolling Y

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables