Issue Using fixedColumns with Bootstrap Tabs

J767

I have a page with two bootstrap tabs, each tab contains one datatable. The below behavior started occurring only after I integrated fixedColumns into both datatables.

On page load the first table is displayed correctly and fixedColumns works correctly. When I click on the tab for table 2 then the table is displayed, but the page content which should be below the table is displayed on top of the table, and fixedColumns does not work.

Table 1:

Table 2:

Link to snippet is below, though I am having a difficult time getting it to render anything.
http://live.datatables.net/zogicuvi/3/edit

kthorngren

Even though your example isn't working the example shows you are loading conflicting CSS files. You have the following.

    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.css">

You should only load fixedColumns.bootstrap.min.css for BS 3 integration. Look at the CSS tab of this example:
https://datatables.net/extensions/fixedcolumns/examples/styling/bootstrap.html

If this doesn't help then please fix your test case so we can see the problem. Looks like there is a console error. I would recommend simplifying the test case to simple place data in the table without all the promises functions.

Kevin

J767

For those interested, the problem turned out to be that my event handler "$('a[data-toggle="tab"]').on('shown.bs.tab' " should have been declared after all of the promise functions had executed.