Column width jumping when transitioning from fixed headers to non on first transition

Zxurian

Video link since hard to explain: https://photos.app.goo.gl/0Nvv2xAm9fa7r1NI2 Couldn't find a reference in the forums for my particular issue so making a new post.

I'm using the fixed headers extension with datables and an ajax data source. On the first load, the columns are sized correctly, and the header row is part of the table. When scrolling down, the header row correctly converts to a fixed header row. (offset by a custom amount). When scrolling back up to the point at which the fixed header transitions back into a table header, the columns widths appear to jump. I can't pinpoint any specific reason why this would be happening.

Created with following

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs/dt-1.10.16/af-2.2.2/b-1.5.0/b-colvis-1.5.0/b-html5-1.5.0/b-print-1.5.0/cr-1.4.1/fc-3.2.4/fh-3.1.3/r-2.2.1/rg-1.0.2/rr-1.2.3/sl-1.2.4
 *
 * Included libraries:
 *   DataTables 1.10.16, AutoFill 2.2.2, Buttons 1.5.0, Column visibility 1.5.0, HTML5 export 1.5.0, Print view 1.5.0, ColReorder 1.4.1, FixedColumns 3.2.4, FixedHeader 3.1.3, Responsive 2.2.1, RowGroup 1.0.2, RowReorder 1.2.3, Select 1.2.4
 */

/*! DataTables 1.10.16
 * ©2008-2017 SpryMedia Ltd - datatables.net/license
 */

Datatables Initialization - currently using

            'columns': [
                { data: 'productionDueDate', width: 100, 'class': 'production-due-date-cell' },
                { data: 'bookstem', 'class': 'title-information' },
                { data: null, orderable: false, width: 100 },
                { data: null, width: 100, orderable: false },
                { data: 'runTime', width: 100, orderable: false },
                { data: 'ipsShipDate', width: 100 },
                { data: null, width: 100, orderable: false },
                { data: 'hardcoverPublishDate', width: 100 },
                { data: null, width: 100, orderable: false }
            ],
//          'responsive': true,
            'lengthMenu': [ 10, 25, 50, 100, 200, 400 ],
            'order': [ 1, 'desc' ],
            'autoWidth': false,
            'processing': true,
            'serverSide': true,
            'searchDelay': 600,
            'stateSave': true,
            'paging': true,
            'fixedHeader': {
                'header': true,
                'headerOffset': 51
            },
            'ajax': function(data, callback, settings) {
                data = $.extend(data, {
                    productionDateFrom: TitleStatusView.dom.input_productionDateFrom.val(),
                    productionDateTo: TitleStatusView.dom.input_productionDateTo.val()
                });
                TitleStatusView.tableFilterParams = data;
                Tantor.ajaxWrapper({
                    data: data,
                    url: '/production/title-status/get-datatables',
                    success: function(response) {
                        callback(response)
                    }
                });
            },
            'createdRow': function(row, data, dataIndex) {
                            // change row stuff
            }

Zxurian

Bumping this to see if anyone has any ideas about it

Zxurian

bumping again to see if anyone has any issues. Searching hasn't come up with anything, and now the effect is getting more pronounced

before: https://i.imgur.com/UE5jLcI.png
fixed header after scrolling: https://i.imgur.com/JhVgIj0.png
distored header after scrolling back up: https://i.imgur.com/AWFT8HL.png

allan

Can you link to a page showing the issue so I can debug it please.

Thanks,
Allan