ColVis Modal will not appear as desired (collectionLayout)

ColVis Modal will not appear as desired (collectionLayout)

growe19growe19 Posts: 18Questions: 6Answers: 0

I am not a developer and very much a copy and paste coder. Using tutorials to my best advantage, tweaking them to do what I require. I've looked at all the Datatables examples and got this far, however...

I have a button for ColVis Options to toggle them on and off. When clicked it loads the Modal.

Link to test case:
There is also: ?mode=live and ?mode=ip
If you would like to see data in the table you need SimHub ( and the Swoop plugin (
Debugger code (
Error messages shown: None
Description of problem:
- On the Modal that appears it never reflects the collectionLayout that I have been testing. With huge white space.


  • allanallan Posts: 62,056Questions: 1Answers: 10,173 Site admin

    Digging into this, I think I've actually fixed this since the 2.2.2 release of Buttons.

    This is the style that is causing the issue:

    div.dt-button-collection div.dropdown-menu {
      padding-top: 0px;
      padding-bottom: 4px;
      padding-left: 4px;
      padding-right: 4px;

    What to do is drop the b-2.2.2 from your DataTables CDN include for the style file (not the JS one, keep it there) and load in this nightly build of the Bootstrap 4 integration for Buttons. Let me know how you get on with that.


  • growe19growe19 Posts: 18Questions: 6Answers: 0

    Allan this has worked perfectly changing to the nightly build. Thanks so much for resolving this.

Sign In or Register to comment.