Responsive don't adjusts the content on iPhone in the begining

samuca

I have a website that opens in an iframe with bootstrap tabs, in those tabs i use DataTables.

In browser and android, tabs adjust correctly, but in iPhone when the website loads the active tab don't adjusts his content, so i need to click in any tab and go back to tab 1, then the tab adjusts.

What can i do to make the active tab adjust when de website load?

Joyrex

@samuca - I use DataTables with Bootstrap Tabs (but not an IFRAME), and this code I have found helps with Responsive DataTables:

// keeps the responsive columns working in tabs
            $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
                $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust()
                .responsive.recalc();
            });

Hope this helps!

samuca

@Joyrex thank you for your comment. I'm already using the recalc when change tabs menu, work perfectly. But when website loads the first tab don't adjust correctly (image1), it adjusts after cliked on tab "Matriculas" and go back to tab "Solicitações" (image2).

Joyrex

@samuca - Ah, I see now what you mean. Are you using Bootstrap 4 (beta 2), or Bootstrap 3.3.7?

Also, do you have the dt-responsive or responsive class in the table tag? I wonder if the <iframe> might have something to do with it?

Try opening the page that loads in the <iframe> on it's own and test the responsiveness.

samuca

@Joyrex I using the Bootstrap 4 (beta 2). I tried opening the page out of <iframe> and worked fine, just like you said the iframe was interfering in the responsiveness. I Worked with Bitrix24 and i can't change anything on <iframe>. I found a solution for now, i reduced the number of columns in the <table> when is mobile, and it worked. I don't know what causes the conflict, but i still looking for it.