Vertical scroll bar is prolonged by white bar above table

fortiernor

Link to test case: Can I provide address and password privately?
Debugger code (debug.datatables.net): egutan
Error messages shown: none
Description of problem: see title.

colin

For the quickest response, it would be best to simulate the problem in our test area, as it's easier to debug there. 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

fortiernor

This is happening in my staging site. Could I send you the address and password without it being publicly visible?

colin

Sure, please send to me and we'll take a look,

Colin

fortiernor

Actually we just put it in production so the address is:

https://actionclimatoutaouais.org/document/sondage-gatineau-2021-resultats/

Thank you!

kthorngren

I didn't find your Datatables init code but it looks like you are using both FixedColumns and FixedHeader for the table. Likely the problem is due to the incompatibility FixedHeader has with the Datatables scrolling features and FixedColumns. This is documented in the FixedHeader docs:

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.

Also see the Compatibility Matrix for more details.

Kevin

fortiernor

I did look at the compatibility matrix, which states that FixedColumns and FixedHeaders are compatible, and that scrolling is compatible with everything else. I assumed the compatibility matrix was more up-to-date than the text you quoted. It seems the documentation is not in sync?

fortiernor

Here is the init code (I skipped the "language" (translations) part):

jQuery(document).ready(function( $ ) {
    
    // debug
    console.log("Entrée dans js");
    
    // localisation
    localize_sort('fr-CA');
    
    // styles pour entête spécifiés avec #aco-table-sondage thead th dans 
    // _aco...scss ne fct pas!
    $('#aco-table-sondage thead th').css('background-color', '#0093d7')
        .css('color', 'white');
    
    var tableCandidats = $('#aco-table-sondage').DataTable( {
        responsive: false,
        paging: false, 
        select: false, 
        info: true, 
        order: [1, 'asc'],
        stateSave: true, 
        dom: 'Bfiti', 
        fixedHeader: {
            header: true,
            headerOffset: $('#wpadminbar').height(),
            //footer: true
        },
        scrollX: true, 
        scrollY: '40vh',
        scrollCollapse: true,
        fixedColumns: {
            left: 2
        },
        search: {
            caseInsensitive: true
        },
        columnDefs: [
            {
                // colonne nom
                // nom, prénom -> prénom nom pour display, export
                render: function (data, type, row) {
                    if ( type === 'display' || type === 'export' ) {
                        var a = data.split(", ");
                        return a[1] + " " + a[0];
                    }
                    return data;
                },
                orderData: [ 0, 1 ],
                targets: 0
            },
            {
                // colonne district
                // nom, prénom -> prénom nom pour display, export
                render: function (data, type, row) {
                    if ( type === 'display' || type === 'export' ) {
                        return data.substring(3);
                    }
                    return data;
                },
                orderData: [ 1, 0 ],
                targets: 1
            },
            {
                // colonnes nom, district: style
                className: "col_titre", 
                "targets": [ 0, 1 ]
            },
            {
                // colonnes trivalue
                // substituer icônes, pour affichage
                render: function (data, type, row) {
                    if ( 'display' === type ) {
                        if ('Oui' === data) {
                            //return '<span class="trivalue trivalue-oui"><i class="fas fa-check" title="Oui"></i></span>';
                            return '<span class="trivalue trivalue-oui">Oui</span>';
                        }
                        if ('Peut-être' === data) {
                            return '<span class="trivalue trivalue-peutetre">Peut-être</span>';
                        }
                        if ('Non' === data) {
                            return '<span class="trivalue trivalue-non">Non</span>';
                        } else {            // si la cellule est vide
                            return '<span class="pas-reponse" title="Pas de réponse">&mdash;</span>';
                        }
                    } else if ( 'export' === type ) {
                        return data;
                    }
                    return data;
                },
                targets: [ 2, 3, 4, 5, 6, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18, 20, 21, 22, 23, 24, 26, 27, 28, 29, 31 ]
            },
            {   
                // colonnes commentaires
                // substituer icônes, pour affichage
                render: function (data, type, row) {
                    if ( 'display' === type ) {
                        return data ? '<span class="icone-commentaire"><i class="fas fa-book" title="' + data + '"></i>' : 
                            '<span class="pas-reponse" title="Pas de réponse">&mdash;</span>';
                    }
                    return data ? data : "--";
                },
                targets: [ 7, 11, 19, 25, 30, 32, 33 ]
            }
        ],
        buttons: [ 
            {
                extend: 'excel',
                text: '<span class="wp-menu-image dashicons-before dashicons-admin-page"></span>Exporter en Excel', 
                titleAttr: 'Exporter les données en format Excel', 
                exportOptions: ({orthogonal: 'sort'}),
                className: 'aco-table-sondage-button'
            }, 
            {
                text: '<span class="wp-menu-image dashicons-before dashicons-undo"></span> Annuler recherche/filtre', 
                action: function ( e, dt, node, config ) {
                    filtrer_candidats_selon_district("Tous");
                    $("#aco-table-sondage").DataTable().search("").draw();
                }, 
                titleAttr: 'Annuler le filtre de districts ou la recherche textuelle',
                className: 'aco-table-sondage-button'
            }
        ]
    });
    
    ajouter_infobulle_au_champ_recherche();
    
    assigner_infobulles();
    
    supprimer_section_el_excedentaire();
} );

fortiernor

It does seem FixedColumns is involved with the problem: turning it off solves it. However that is not a viable option on a table that wide (function over form...).

Looking at it with Firefox inspect, it seems the problem is related to overflow from this element, i.e. the inset attribute; turning the inset off seems to solve the problem:

<div style="background-color: white; inset: 0px 0px 0px 1291px; display: block; position: absolute; width: 13px; height: 270.2px; z-index: 1;" class="dtfc-right-top-blocker"></div>

fortiernor

Ok, now I am utterly confused. Commenting off FixedHeader seems to solve the problem, which would mean the text about FixedHeader quoted above by kthorngren is correct, and the compatibility table is wrong. But:
- with FixedHeaders off in my init code, the header is still fixed (good);
- if FixedHeader is incompatible with scrolling, what does it do? If you don't scroll you don't need a fixed header, it seems to me.

fortiernor

Ok, the problem seems to be that the compatibility table refers to the latest version of FixedHeaders (4.0.0) (and FixedColumns (4.0.1)).
However the download builder on the download page actually provides FixedHeaders 3.2.0.
Shouldn't the download page provide the latest (stable) versions?

fortiernor

I've entered a bug report:
https://datatables.net/forums/discussion/70436/fixedheaders-download-provides-outdated-version-according-to-compatibility-table/p1?new=1