columns are removed from dom in Chrome

columns are removed from dom in Chrome

HlodvigHlodvig Posts: 5Questions: 2Answers: 1

I have table with several columns, but one of cells contains very long string. Firefox wraps text so all columns are fit to screen, but in chrome text is not wrapped, so the column is not fully visible. Disregarding the wrap issue there is a strange behavior - while all columns are visible in Firefox - all columns which are not fully visible are just removed completely from DOM in chrome. I don't see them with inspect element tool.
I use responsive plugin and bootstrap, but even if responsive is turned off - columns are removed from dom.
The most interesting thing is that they are rendered in FF.

I thought that it's because of deferRender: true, but it's not. And why in FF columns persist while in Chrome they're removed. How to find culprit? Or datatables WAD and I need to fix wrapping issue?

Code to initialize datatables is very long and in two different files because I use Metronic helpers, but parameters are like that:

dataTable: {
                // here you can define a typical datatable settings from http://datatables.net/usage/options

                // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
                // So when dropdowns used the scrollable div should be removed.
                //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
                "dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>f>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout
                "stateSave": true, // save datatable state(pagination, sort, etc) in cookie.
                    "autoWidth": false, // disable fixed width and enable fluid table
                    "processing": false, // enable/disable display message box on record load               "serverSide": serverSide,
                "deferRender": false,
                "responsive": false,
                "orderClasses": false,
                "columns": columns,
                "ajax": function (data, callback, settings) {
                    if (serverSide) {
                        console.log("ajax load started with draw " + data["draw"] + " start " + data["start"] + " length " + data["length"] + " search " + data.search.value + " sort " + data.order[0].column);
                    } else {
                        console.log("ajax load started with client-side processing with draw " + drawCounter);
                    }
                    //add ajaxPoll parameter to distinguish auto-poll and real action
                    data.ajaxPoll = true;

                    //if (drawCounter > 0) {
                    console.log('send request');
                    $.ajax({
                        url: $table.data('url'), // ajax URL
                        data: $.toDictionary(data),
                        type: "GET", // request type
                        timeout: 20000,
                        beforeSend: function () {
                            //$('body').modalmanager('loading');
                            /*Metronic.blockUI({
                                message: "Please wait",
                                target: $('body'), //$table.parents(".table-container"),
                                overlayColor: 'none',
                                cenrerY: true,
                                boxed: true
                            });*/
                        },
                        success: function (res) {
                            console.log('update started');
///
}
This discussion has been closed.