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

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

ZxurianZxurian Posts: 26Questions: 6Answers: 0

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
            }

Answers

This discussion has been closed.