When scrolling horizontally, column headers overlap the fixed column 1 header.

jpr105

Strange, this has already worked. Here is my code

jQuery(document).ready(function($) {
    $('#table_adc').DataTable( {
        "dom": 'Blftip',
        "buttons": [
            {extend: 'colvis' },
            {extend: 'csv' } 
        ],
        "fixedHeader": true,
        "pageLength": 50,
        "scrollX": true,
        "fixedColumns": { leftColumns: 1 },
        "order": [[ 1, 'asc' ]],
        "select": true,
        "scrollY": "75vh",
        "language": {
        processing:     "Traitement en cours...",
        search:         "Rechercher :",
        lengthMenu:    "  Afficher _MENU_ TroCœurs",
        info:           "Affichage du TroCœur _START_ à _END_ sur _TOTAL_ TroCœurs",
        infoEmpty:      "Affichage du TroCœur 0 à 0 sur 0 TroCœurs",
        infoFiltered:   "(filtré de _MAX_ éléments au total)",
        infoPostFix:    "",
        loadingRecords: "Chargement en cours...",
        zeroRecords:    "Aucun élément à afficher",
        emptyTable:     "Aucune donnée disponible dans le tableau",
        paginate: {
            first:      "Premier",
            previous:   "Précédent",
            next:       "Suivant",
            last:       "Dernier"
        },
        aria: {
            sortAscending:  ": activer pour trier la colonne par ordre croissant",
            sortDescending: ": activer pour trier la colonne par ordre décroissant"
            },
        buttons: {
            colvis: "Cacher/Afficher colonnes",
            csv: "Export en CSV"
            }
        }
    } );
} );

Thanks for your help. I can provide a private link if required

colin

There was an issue with this recently, but it was fixed in the most recent release - see here. It would be worth updating to the most recent releases and see if it still fails there, and if so, yep, please provide that link so we can debug,

Colin

jpr105

I upgraded FH to fh-3.2.3 but still the same
Will send you private link ASAP
Thanks

allan

I've added a reply to your PM. For anyone else here with the same issue, it needs an update to FixedColumns 4.1.0 to fix it.

Allan

jpr105

Thanks a lot @allan

spnz

This works fine until I add a column filter (under the header). While the column header and data rows nicely hide behind the hidden column when scrolled, the column filter input boxes overlap. I'm using the below example together with fixed columns:
datatables.net/extensions/fixedheader/examples/integration/columnFiltering.html

Any help on fixing this issue with interworking? Much appreciated. Thanks.

kthorngren

@spnz Without seeing what you have done its hard to say specifically but there might be two issues I know about:

1. If you have complex headers the columns that are to be fixed need to use rowspan to make sure there is only one th for each of those columns. See this FC with complex headers example for details.
2. You may need to use CSS to set the size of the text inputs so they don't affect the column size.

I took the FH column filtering example you linked to and made a couple changes to show the above.
http://live.datatables.net/cumusaho/1/edit

See the CSS in the CSS tab. I put the second header in HTML with the rowspan for the fixedColumn. And made some adjustments to the initComplete code to handle skipping the first. Look for three comments with colIdx for the changes.

If this doesn't help then please provide a link to your page or a test case replicating thie issue. Update my example if you want.

Kevin