Misalignment of table header in Modal Page

Akashvino

Hi All,

Request your help, We have modal page which consist of 5 tables, the table header is misaligned when loading the modal page, tried the below but non of them are working

Tried to set the width of the table : width="100%" - No luck
Tried to add table.columns().adjust() - No luck
Tried to add table.columns().adjust().draw() - No luck
Tried to remove scrollY - No luck
Tried to add the modal part with in a container - No luck
Ran the debugger and as per the debugger (https://datatables.net/examples/api/tabs_and_scrolling.html) added the below line in the modal page - No luck.
Appart from the above error the debugger is not complaining about any other issues.

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

Akashvino

Hi All,

Request your help, the data-table debugger reports the below error and as per the example provide in the link "https://datatables.net/examples/api/tabs_and_scrolling.html" we have tried the below options , but still the debugger throws the same error message, and we have multiple tables in the Modal page and we have set tried the below setting for all the tables still it reports the same error message.

• > Update the code with this line:
  $.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust();
• > Tried adding to the initComplete function as below
  initComplete: function (e ) { $.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust(); }
• > Tried adding to the drawCallback function as below
  drawCallback: function (e ) { $.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust(); }

Error

The table has scrolling enabled and the header and body parts of the table are misaligned. This is typically cased by the table being initialised when it is hidden. In this case, the table needs to have the columns.adjust() method called on it when the table is made visible. This example shows how that can be done with Bootstrap tabs.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin