Vertical scroll bar is prolonged by white bar above table

Vertical scroll bar is prolonged by white bar above table

fortiernorfortiernor Posts: 10Questions: 2Answers: 0

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.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0

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

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

    Thank you!

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0
    edited October 2021

    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?

  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0
    edited October 2021

    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();
    } );
    
  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0

    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>
    
  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0

    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.

  • fortiernorfortiernor Posts: 10Questions: 2Answers: 0

    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?

Sign In or Register to comment.