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

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

RousseauRousseau Posts: 3Questions: 2Answers: 0
edited May 22 in Free community support

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.

Answers

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

  • RousseauRousseau Posts: 3Questions: 2Answers: 0

    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>
    
  • colincolin Posts: 8,661Questions: 0Answers: 1,449

    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

Sign In or Register to comment.