Responsive.recalc partially not working on iOS Safari (iPhone)

Tronik

Hi,

I'm working on a website where fancybox opens a new iframe with some bootstrap Tabs, each containing a datatable.

I'm using the current function to redraw the table to fit the screen responsively:

$(document).ready(function() {
      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    
       $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
    } );
  } );

This works perfectly on my computer when i resize the browser windows to match an iPhone resolution.

But when I try this on the actual iPhone, it works like this:

1. Tab containing datatable clicked - no redraw is done, fullsize datatable with no change
2. Another tab clicked, any tab
3. Back to tab on step 1 - NOW it worked and the table has been responsively resized

Why? As I said works perfect on PC (Chrome).

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Try adding a setTimeout for the DataTables API calls you are making. If you do that, does that fix the issue in iOS?

Allan

Tronik

Hi allan,

I tried this without success, same behavior; I must first click another tab - then back to tab.

$(document).ready(function() {
      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {      
             setTimeout( function () {
               $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
          }, 1500 ); 
    } );
  } );

allan

Could you try using the Responsive nightly which will include this fix once it rebuilds (in about 5 minutes). You shouldn't need to call responsive.recalc() that way, and it appears to work okay for me.

Allan

Tronik

Some questions:

1. I use Editor which already seems to include the responsive plugin (no external responsive js file) Should I include the nightly file anyways? How does dataTables know which to choose?
2. With this fix, I dont need the above js code at all?

allan

1) That isn't the case I'm afraid. Editor does not include any Responsive code for the table (only its own form layout and that is primarily CSS). The Responsive file must be getting loaded from somewhere - possibly a datatables.js file if you used the download builder?

2) This is what seems to work for me:

$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
       $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    } );
  } );

Allan

Tronik

Yes I used the generator, so i suppose responsive is included both in the datatables.js and css file, since responsive is not included externally from what I can tell.
Should I include the nightly css and JS responsive files after datatables for it to work?

allan

Have a look at the top of the datatables.js file - it will have a comment stating what libraries are included.

You could either replace the Responsive code in the datatables.js file or include the nightlies after. They will overwrite the old components.

Allan

Tronik

Hi again,

I'm going mad with this issue, I dont understand what the difference is from safari on ios and e.g. Chrome...
I've tried inluding the nightly responsive.js, along with you code, and that makes it not work at all, works on PC of course but on iPhone now nothing happens even when click on other tab then click back.

Has it something to do that my table and tabs is opened in a fancybox?

allan

It is possible that it is related to that. I don't seem to be able to reproduce the issue here. Can you link to a test page showing the issue please?

Allan

Tronik

Can I PM you a link to my actual page, since I dont want to expose it on open forum?

allan

Sure - click my name above and then "Send message". It sounds like it might be quite a complicated issue so I'm not sure how long it will be before I can look into it in detail if it is complex.

Allan

Tronik

It definately has got something to do with the page opens in an iframe fancybox, tested the iframe url standalone and then everythong worked. Will see if I can figure out this one myself first...

Tronik

Any new on this matter?

allan

Forgive me if I missed it, but I don't think I received a test case. If I did, could you resend it please.

Allan