Fixed Header - overflows beyond table container

IMTanuki

TL;DR - in a small form factor (mobile), the sticky (fixed) header overflows table container.

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src d0wnloaded consolidated DT css and js files.

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

screenshot:
https://imtanuki.tinytake.com/tt/NTU0MTMzM18xNzI3MjUxNg

issue:
So, the fixed header works fine when the table container (e.g. bootstrap col) is narrower than the viewport. But if scrollX is true, the fixed header overflows the immediate parent container and extends to the edge of the screen.

Is there any way to set overflow:hidden for the fixed header?

config:

var tableSandbox02 = $ ( '#table-sandbox-02' ).DataTable ( {
        // data src
        ajax: "../../custom/assets/data/data-gdp.json",
        columns: [
            { data: "Entity" },
            { data: "Code" },
            { data: "Year" },
            {
                data: "GDP",
                className: "text-end",
            },
        ],


        // general features
        deferRender: true,
        stateSave: true,
        info: true, // show x of y records
        processing: false, // show / don;t show processing msg

        // dom
        dom:
            "<'row'<'d-none d-md-flex justify-content-between pb-0'<\"control-paglen-02\">f>>" +
            "<'row'<'d-flex d-md-none justify-content-between pb-0'<\"control-paglen-02\">f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'d-none d-md-flex justify-content-between pt-2'ip>>" +
            "<'row'<'d-flex d-md-none justify-content-between pt-2'ip>>" +
            "<'row'<'d-none d-md-flex justify-content-end pt-2'B>>" +
            "<'row'<'d-flex d-md-none justify-content-center pt-2'B>>",

        // buttons
        // note
        // - will not display unless dom is modified using code 'B'
        buttons: [
            {
                extend: "excel",
                className: "btn-primary",
                titleAttr: 'Save in Excel',
                text: 'Save in Excel'
            }
        ],

        // options
        ordering: true,
        // order: [[ 1, 'asc' ], [ 2, 'asc' ]], // stateSave must be false for this to work
        displayStart: 0,
        orderMulti: true,
        orderClasses: true,

        // responsive
        responsive: false,

        // pagination
        // notes
        // - if paging is true, then scrollY must be false
        paging: true, // pagination controls
        lengthChange: true, // allow user to change page len
        pageLength: 10, // default page len
        pagingType: 'full',

        // horizontal scrolling
        scrollX: true,

        // vertical scrolling
        // notes
        // - should always be false - conflicts with pagination
        scrollY: false,

        // header options
        fixedHeader: {
            header: true,
            headerOffset: $ ( '#xmd-navbar' ).outerHeight ()
        },

        // columns
        // notes
        // - even though col widths should always be explicitly defined,
        // - auto-width should always be true if scrollX is true (otherwise, horiz scrolling won't work)
        autoWidth: true, // auto-calc col widths
        columnDefs: [ {
            width: "100px",
            targets: [ 0 ]
        }, {
            width: "50px",
            targets: [ 1 ]
        }, {
            width: "50px",
            targets: [ 2 ]
        }, {
            width: "50px",
            targets: [ 3 ]
        },
        ],

        // search
        search: {
            caseInsensitive: false,
            smart: true,
            searchDelay: 350,
        },

    } );

colin

Thanks for the info, but I'm not seeing the table that you posted in the screenshot - I can't find one with headers Country, Code and Year, and the ones that are there are behaving as expected.

Can you point me to the correct place, please,

Colin

kthorngren

This FixedHeader docs state this:

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.

A typical issue when both are used together is the header and table columns don't align.

Kevin

IMTanuki

Hi Colin,

Thx for the quick reply - sorry for any confusion - I may have overwritten files on host server late last nite...

There are actually 2 issues with the fixed header:
- if scrollX is true, the fixed header doesn't sync with the current cols. I assume this is the issue listed in the compatibility table (thx Kevin) and I understand why this would happen...let's deal with this some other time.
- however, when the fixed header is triggered, it overflows the table container and I don't think this is related to scrollX...

Tables
There are 2 tables in my sandbox site - both exhibit the overflow issue.
Table 01 is wrapped by a row with 1 col (comments below refer to Table 01).
Table 02 is wrapped by a row with 2 cols.

Table 01 Params

responsive: false,
scrollX: false,
scrollY: false,
fixedHeader: {
    header: true,
    headerOffset: $ ( '#xmd-navbar' ).outerHeight ()
    },
autoWidth: false, 
fixedColumns: false, 

Recap of Issue
- with the above params, fixed header overflows when triggered.

Website
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

Screenshots
Fixed Header not triggered, no overflow: https://imtanuki.tinytake.com/tt/NTU0NTEwN18xNzI4MTk2Ng

Fixed Header triggered, overflow:
https://imtanuki.tinytake.com/tt/NTU0NTExOF8xNzI4MTk5Mg

Hope this helps...

kthorngren

Try adding style="width:100%" as shown in this example.

Kevin

IMTanuki

Kevin,

style="width:100%" doesn't alter the fixed header overflow. And it undoes column width settings.

The only scenario where I can eliminate the overflow is when scrollX: false.

So it looks like the compatibility issue includes both syncing columns (when scrolling horizontally) and overflow (when scrollX: true).

Is there any way to confirm that this is reproducible at your end and whether there is any plan to resolve sometime in the foreseeable future? I can live with it in the short-term...

Thx

allan

Hi,

Unfortunately, FixedHeader is not currently compatible with DataTables' scrolling feature.

It is indeed reproducible here, but it isn't an easy fix unfortunately. It is on our radar, but I can't say when we'll be able to get to it yet.

Allan

IMTanuki

OK, appreciate the update. FWIW, I think scrolling and fixed headers are two of the most useful options for tables, so hopefully, this will get resolved sooner or later.