cell header does not scrollX with body

louking

I looked at https://www.datatables.net/forums/discussion/14342/column-header-not-aligned-with-column-data-with-horizontal-scrolling:

Since cellspacing is not valid any more did not try that (in any case seems that's set correctly in the dom, or at least cellspace="0" is in my dom).

Did try setting border-collapse: separate (was collapse) but this did not help.

I have scrollX: 100%.

I did not try the .scrollStyle wrapper recommended by rcuartas as that seems heavy handed and likely unnecessary.

see http://sandbox.steeplechasers.org/scoretility/_teststandings/

Not quite sure what I'm doing wrong here.

louking

I guess I am confused by the following snippet in my dom. The overflow: auto within dataTables_scrollBody is causing only the body to scroll, no?

<div class="dataTables_scroll">
  <div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
  <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; height: 466px;">

If I manually move overflow: auto to within dataTables_scroll the table seems to behave properly.

Is this a bug or a configuration problem? I assume the latter because otherwise everyone else would be noting this behavior.

louking

Note I'm using DataTables-1.10.10. I see that the $(scrollBody).on('scroll.DT' function is firing, but the scrollHead.scrollLeft = scrollLeft statement seems to have no effect on the header.

Starting at line 3804

        // When the body is scrolled, then we also want to scroll the headers
        if ( scrollX ) {
            $(scrollBody).on( 'scroll.DT', function (e) {
                var scrollLeft = this.scrollLeft;
    
                scrollHead.scrollLeft = scrollLeft;
    
                if ( footer ) {
                    scrollFoot.scrollLeft = scrollLeft;
                }
            } );
        }

louking

With a breakpoint at 3811 (line 8 in the above comment), I can see the results of the scrollLeft assignment at the console

> this.scrollLeft
1
> scrollHead.scrollLeft
0

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft seems to indicate the following. Not sure which condition is being met. overflow: hidden is set in the dom, but overflow-x: visible can be seen in the computed styles.

scrollLeft can be set to any integer value, however:

• If the element can't be scrolled (e.g. it has no overflow), scrollLeft is set to 0.
• If set to a value less than 0 (greater than 0 for right-to-left elements), scrollLeft is set to 0.
• If set to a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

allan

In the file jquery.dataTables.yadcf.css, for some reason that I'm not aware of there is this statement:

.dataTables_scrollHead {
    overflow: visible !important;
}

Remove that and it will work as expected.

Allan

louking

Hmm, that's been removed recently but hasn't yet been released. See https://github.com/vedmack/yadcf/commit/7b37b3142059efc8e2d81c5f6d93d38d81a022bd#diff-e6936b966a523b1f1dacfedbb1a802be

Maybe I need to pick up the current dev version

Thanks