FixedColumns plugin - styling conflict

kelv

I'm implementing Fixed Columns on an existing website (written in MVC, C#).

DataTables debuger info is here: https://debug.datatables.net/edatad
Unfortunately this is a company website and I can't replicate it outside of this website. Any suggestions on how I can do this would be much appreciated. I'm fairly new to web dev.

Symptoms
When the table renders, it looks like the attached image and has the following issues: -
a) The right-hand column isn't fixed (the whole table scrolls).
b) The Show x entries box is at the top instead of the bottom.
c) The Column Headers have an unwanted scrollbar, which doesn't fill the width of the table.
d) The Previous and Next buttons are in line with the header instead of the bottom of the table.

However, if I redraw the table from the Dev tools it all then works perfectly!
$("#DataTables_Table_2").DataTable().draw()

Things I've tried
Excluding the Bootstrap.js library fixes the issue. This indicates to me that there's some kind of clash.
Redrawing the table in the Javascript either straight after the following code, or from a Datatable event (such as init).
None of the above worked but running the following did (this is a hack and I don't want to do this): -

        setTimeout(function () {
           table.DataTable().draw();
        }, 5000);

Javascript for Datatables initialization

    function setup(table) {
   {
        var settings = {
            columnDefs: [
            { orderable: false, targets: -1 },
            { orderable: false, targets: -2 }
            ],
            columnsToExcludeFromColVis: [12, 13],
            fixedColumnSettings: {
                leftColumns: 0,
                rightColumns: 1
            }
        }

        setupShortlistTable(table, settings);
        setupShortlistTable(table,settings);
    }


    function setupShortlistTable(table, settings) {

        // If available wait until the users table state deferred object has been resolved before initialising the DataTable.
        $.when(window.tableStateLoaded || true).then(function (stateSaveEnabled) {
            $(table).dataTable({
                "dom":
                    "<'row'<'col-xs-12 dataTables_top'l<'adtl-controls'C>f>>" +
                        "<'row'<tr>>" +
                        "<'row'<'col-xs-12'ip>>",
                "aaSorting": [[1, "asc"]],
                "orderClasses": false,
                "columnDefs": settings.columnDefs,
                colVis: {
                    "buttonText": "Change columns",
                    exclude: settings.colVisExclude,
                    restore: "Restore",
                    showAll: "Show All"
                },
                scrollX: "100%",
                fixedColumns: settings.fixedColumnSettings,
                "stateSave": stateSaveEnabled && $(table).data("saveTableStateUrl") != null,
                "stateSaveCallback": function (settings, data) {

                    //We don't want to save search criteria
                    data.search = {}
                    data.start = 0; //Show results table starting at the beginning

                    if (stateSaveEnabled) {
                        var tableType = $(table).data("tableStateType");
                        var state = JSON.stringify(data);

                        localStorage.setItem("DataTableState_" + tableType, state);

                        $.ajax({
                            "url": $(table).data("saveTableStateUrl"),
                            "data": { json: state, type: tableType },
                            "type": "POST"
                        });
                    }
                },
                "stateLoadCallback": function (settings) {
                    var tableType = $(table).data("tableStateType");
                    var state = JSON.parse(localStorage.getItem("DataTableState_" + tableType));
                    return state;
                }
            });
    }

kelv

Further info: it looks like the widths and heights are all set to 0 for the table until draw() is called. With the Bootstrap library excluded, it works fine.

allan

Does your table have width="100%" or style="width:100%" on it? If so, could you add that.

Further info: it looks like the widths and heights are all set to 0 for the table until draw() is called.

Is the table initialised hidden? If so, that's the issue. Call columns.adjust() when the table is made visible.

Allan