scrollBody width switching from 100% to a calculated value on scroll

[firebluetom]

I've experienced an issue with the scroller switching width of the table for me, especially when there is overflow, between 100% and a calculated value. This happens when I scroll the table. This creates a problem when scrolling as I see differences in how the table and scrollbars display.

Starting at line 487 in the scroller JS, I just added a forced style to make the width 100% of the container for the scroll and touchstart events. This fixed my issue; maybe this will help someone else.

    $(this.dom.scroller).on( 'scroll.DTS', function (e) {
        that._fnScroll.call( that );
        that.dom.scroller.style.width = "100%";
    } );

    /* In iOS we catch the touchstart event in case the user tries to scroll
     * while the display is already scrolling
     */

    $(this.dom.scroller).on('touchstart.DTS', function () {
        that._fnScroll.call( that );
        that.dom.scroller.style.width = "100%";
    } );

[DataTables]

Hi - can you link to a test case showing the issue please?

[firebluetom]

Sorry, the only code I have with this error is from our company code and I can't release that out. I don't know for sure that this is an issue with the Scroller plugin itself or some interaction with our table styles. But if I get a chance to recreate this, I'll link it here.

[DataTables]

That would be great - thanks.

[DataTables]

Going to close for the moment. If any one else comes across this issue - please link to a test case showing the issue.

[ghost]

I got this issue when I set font-size of th tag too large.
The header and body of table are not applied "scrollX" when I click on header to sorting or any api (search, paging,..).
If I click on header again, It will be applied "scrollX" again. (One not applied and one applied).
The div tags with class are datatables_scollbody and datatables_scollheader will change "width: 100%" to "width: ....px" (calculated number).

[AllanJard]

@sangnm-w Can you link to a page showing the issue please? Do you mean the table overflows horizontally, but scrollX isn't enabled, and therefore the header and body don't keep alignment? If so, yes, that is expected. If there is horizontal scrolling, you need scrollX enabled.

[ghost]

@sangnm-w Can you link to a page showing the issue please? Do you mean the table overflows horizontally, but scrollX isn't enabled, and therefore the header and body don't keep alignment? If so, yes, that is expected. If there is horizontal scrolling, you need scrollX enabled.

https://servicedesk.cjvina.com/CJ-Run-Event/Management
ID: CJ1299709 PW: testing
Try to change font-size of table>th to 1.3rem and click on header row to sort any column. (make sure width of the browser will set table to scrollx.)
I got this issue with .net framework mvc 4 (cshtml render). I tried to make it with only html + css + js and it always fine.

[AllanJard]

Thanks for the test case. I do see the issue. I'll try to look into this next week.