ColVis display issue (with bootstrap 3)

ColVis display issue (with bootstrap 3)

bsukbsuk Posts: 92Questions: 26Answers: 2

I'm using the css and js examples in the "basic initialisation", and I can see it working on the datatables example page.
However, for me when I click on the "show / hide columns" button, the text and checkboxes from the ColVis function appear laid over the top of everything, transparently in a very messy way, and furthermore it's not then possible to close the colvis box. Even hitting escape, or clicking away from it with the mouse doesn't get rid of it.
Despite this, the actual functionality of it seems to work.

I'm using server side processing and bootstrap 3 and can't seem to get round this problem no matter what configuration I try.
Any help greatly appreciated!

Here is a screen grab of what I described, in case that helps:

http://www.benshaw.org.uk/misc/colvis.png

Answers

  • bsukbsuk Posts: 92Questions: 26Answers: 2

    I've resolved this now by linking to all of the CSS and JS files from the CDN.
    The "basic example" page doesn't seem to include all of the required css and js files needed for this to work.

    For reference these are:
    <link href="//cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.css" rel="stylesheet">
    <link href="//cdn.datatables.net/colvis/1.1.0/css/dataTables.colvis.jqueryui.css" rel="stylesheet">
    <link href="//cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.min.css" rel="stylesheet">

    <script src="//cdn.datatables.net/colvis/1.1.0/js/dataTable.colVis.js"></script>
    <script src="//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.js"></script>
    <script src="//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js"></script>
    
This discussion has been closed.