Responsive doesn't work on first load

Responsive doesn't work on first load

rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

@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

This question has accepted answers - jump to:

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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);      
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited February 2018

    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> 
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

    $(document).ajaxStop(function () {
            $('#content').fadeIn('fast');
            $.busyLoadFull("hide", { 
              // options here 
            });   
            $('table.table').each(function() {
                if ( ! $(this).hasClass("hidden") ) {
                    $(this).DataTable().columns.adjust()
                                       .responsive.recalc();
                }
            })
        });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

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

    Allan

This discussion has been closed.