Issue Using fixedColumns with Bootstrap Tabs

Issue Using fixedColumns with Bootstrap Tabs

J767J767 Posts: 2Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • J767J767 Posts: 2Questions: 1Answers: 0

    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.

This discussion has been closed.