Possible bug (and solution) for dataTables.fixedHeader.js

tmarticoll

Hi,

Sorry for posting this here in the forums, but looked at the DataTables source code on github and did not see the affected file (I suppose some build process there exists which produces the definitive files).

After staring using fixedHeader functionality, and when the original table TH cells have a combination of margin/padding, following happens:

• when the fixed header is shown it happens that, visually, an horizontal offset is added to the fixed header cells. Thus, what happens is that a "jump" efect is produced (when the fixed header is shown, it looks like the table header "jumps" horizontally).

• when the fixed header is hidden it happens the same but in the opposite direction: an offset is added to the original table cells. Although this does not happen always.

Looking at the code for version 3.1.2 of dataTables.fixedHeader.js, I see following lines of code:

    _matchWidths: function ( from, to ) {
        var get = function ( name ) {
            return $(name, from)
                .map( function () {
                    return $(this).width();
                } ).toArray();
        };

        var set = function ( name, toWidths ) {
            $(name, to).each( function ( i ) {
                $(this).css( {
                    width: toWidths[i],
                    minWidth: toWidths[i]
                } );
            } );
        };
        ...

Watching the behaviour, I suppose that there is a mismatch between reading width of an element with jQuery and setting it with CSS. It semms that in the process (if using jQuery get+CSS set), some information about margin/padding is either lost as taken into account twice.

So, in order to fix that, I changed previous code (lines 11-13) to (line 11):

    _matchWidths: function ( from, to ) {
        var get = function ( name ) {
            return $(name, from)
                .map( function () {
                    return $(this).width();
                } ).toArray();
        };

        var set = function ( name, toWidths ) {
            $(name, to).each( function ( i ) {
                $(this).width(toWidths[i]);
            } );
        };
        ...

Which seems to effectively bugfix the problem.

Regards,
Toni

x.wolverine.x

I can confirm this issue. Thx Toni for sharing.

allan

Are either of you able to give me a link to a page showing the issue please? I'm wondering specifically if you have a box-sizing property set for the cells?

Allan

x.wolverine.x

HI Allan,
thx for coming into this strange behavior. I still think it depends on then WP Theme I'm using. I use the plugin TablePress for WP with fixedHeader in combination of responsive. You can check it here: https://shaiya-wiki.eu/skills-kaempfer-krierger/#Buff
Regards,
Ben

allan

Hi Ben,

Thanks for the link! Does that file have the fix from above applied? It looks okay to me in Chrome - although there is some slightly weird overflow behaviour in narrow windows, which appears to be coming from TablePress' CSS.

Allan

x.wolverine.x

Yes the fix is applied. You want to check it without? You know the class from the overflow behaviour?

x.wolverine.x

I revert the fix for the moment.

allan

Thanks! I think it is the box-sizing that is causing the issue.

Interestingly, I did actually used to use $().width() (diff) but the commit message for that says that widths could misalign.

Column widths are such a pain!

If you use:

table, table tr, table td, table th {
  box-sizing: content-box;
}

without the fix above, does that also resolve the issue?

Thanks,
Allan

x.wolverine.x

Thx, works great.
It's really the box-sizing.

allan

Thanks for letting me know.

At the moment the DataTables stylesheets explicit set the box sizing for the table elements - I'm not sure why that isn't there on this page. However, there is a fair bit of work to do to support box-sizing: border-box, not just in FixedHeader.

Allan

tmarticoll

Hi Alan and x.wolverine.x,

Thanks a lot for the folllow up of this issue.

Had been on vacation until one week ago, and just seen your posts.

On Monday will also try your solution and let you know.

Thanks again!