ColVis Checkboxes Stack

JLegault

Link to test case: http://live.datatables.net/tahivufu/2/edit
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem: The Column visibility dropdown does not display the checkboxes correctly. This forum example seems to suggest that checkboxes would be added as built-in functionality, but I cannot find any other reference to that. I'm currently using the solution found in that thread, but it doesn't seem to play nicely with bootstrap.

1) Is there a better solution to adding checkboxes to the colvis button?

2) If not, how can I modify my CSS to actually place the checkboxes next to each item instead of all stacked up at the top?

allan

1) Is there a better solution to adding checkboxes to the colvis button?

No - I think CSS is the way to do this. The discussion you linked to was five years or more back, and my thinking now is that each styling framework should provide its own enabled / disabled state. If you want to alter that, then CSS is the way to go.

2) If not, how can I modify my CSS to actually place the checkboxes next to each item instead of all stacked up at the top?

Add:

div.dt-button-collection .dt-button {
  position: relative;
}

Your :before elements were position: absolute so they were being positioned relative to the offset parent. You want that offset parent to be the button - the above CSS does that: http://live.datatables.net/tahivufu/4/edit .

Allan

JLegault

As always, Allan delivers! Thank you so much this was exactly what I was looking for!