Responsive doesn't work on first load

rf1234

@allan,

I am using responsive across the board. Now I noticed that it doesn't work on first load, only when I resize the screen it works fine. I sent you a message with a link to the page and login information. I'd be grateful if you could take a look please.

Roland

rf1234

Could have been caused by this:

$(document).ajaxStop(function () {
        $('#content').fadeIn('fast');
        $.busyLoadFull("hide", { 
          // options here 
        });        
    });

I fade in the tables only after everything has really been loaded. Otherwise the ugly HTML headings appear too early before they are formatted. That might cause the responsive calculation to kick in too early as well.

Did this and it worked:

table
        .on('init', function () { 
            setTimeout(function(){ 
                table.columns.adjust()
                             .responsive.recalc(); }, 500);      

allan

Yes! Sorry I haven't had a chance to look at your demo yet, but if that is what your code is doing, then absolutely that is the issue. When the table is hidden it has how dimensions so any width calculations are effectively useless. You have to call columns.adjust() when the table is made visible (which you could do after the fadeIn (assuming the tables are in there).

Allan

rf1234

Got rid of the timeout plus the redundant statements in each table's "init" event handler. This works now for all of my pages with just this single statement:

$(document).ajaxStop(function () {
        $('#content').fadeIn('fast');
        $.busyLoadFull("hide", { 
          // options here 
        });        
        $('table.table').DataTable().columns.adjust()
                                    .responsive.recalc();
    });

I use Bootstrap 3 and all of my data tables have these classes

<table id="tblId" class="table table-striped table-bordered"
 ......
</table> 

rf1234

This caused trouble with hidden tables. the recalculation made fragments of the tables visible. Pretty weird ... But this works now - really really

$(document).ajaxStop(function () {
        $('#content').fadeIn('fast');
        $.busyLoadFull("hide", { 
          // options here 
        });   
        $('table.table').each(function() {
            if ( ! $(this).hasClass("hidden") ) {
                $(this).DataTable().columns.adjust()
                                   .responsive.recalc();
            }
        })
    });

allan

You can simplify lines 6-11 there a little bit:

    $.fn.dataTable
        .tables( { visible: true, api: true } )
        .columns.adjust();

Allan