Adminlte: Datatables not responsive when in a tab.

[xDowwdeen]

Hi,

I am having a problem when it comes to getting the Datatables to be responsive when in a Tab. As soon as like i put my phone landscape and the portrait it is fine but when the page first loads it doesn't resize the datatable to the size of the screen. See images below.

Anyone have any ideas on how to fix this? have been going around in circles with it for ages.

It is fine if i place a Datatable in a normal 'div' box.

Thanks

[rafgugi]

hey. can I see the code?

[xDowwdeen]

Yeah sure.

Added onto pasteBin.

https://pastebin.com/UVxXp67Z

[rafgugi]

I myself use

<div class="table-responsive">
  <table id="applicationList" class="table table-bordered table-striped">
  ...

from bootstrap

[REJack]

That would work on @xDowwdeen tables too, in the pastbin code you doesn't execute DataTable JS function,
if you want to use DataTables instead of Boostraps Tables use DataTable's Responsive extension for this problem.

[xDowwdeen]

@REJack I do use the Datatables extension and the JS functions are at the bottom of the page. The Responsive extension is working but when i load the page it doesn't but as soon as i rotate the device to landscape and then back to portrait its fine.

[fschaeffer]

If you are using a dataTable in a hidden tab (meaning it is not shown on page load) you'll have to take care yourself on resizing the columns on first page load.

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

This is also mentioned in dataTables documentation: https://datatables.net/examples/api/tabs_and_scrolling.html

[xDowwdeen]

Perfect that had fixed it. Thanks all for your help :)

[zhoudaqing]

hi @xDowwdeen ，What design software do you use?

[xDowwdeen]

i use coda on Mac OS