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

Rousseau

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

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

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

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

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

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

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

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

Rousseau

Can you please screenshot the output you have?

colin

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

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

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

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

Colin

tefdat

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

Nice, thanks for posting

Colin