Using 'colvis' button to hide/display columns -- the columns list shows off the screen.

lisarush

Link to test case: http://live.datatables.net/nisileqa/12/edit (even if change Buttons version to 1.6.3) May need to narrow screen so 'Column Visibility' button is at far right.
Description of problem:

I have the 'colvis' button displayed at the far right of the table header. When I click on the button to get the list of columns to toggle, the list of columns aligns with the left side of the 'colvis' button & therefore, shows off the screen. If the CSS 'left' property is cleared, the columns list nicely aligns with the side of the screen. Best way to fix this?

I am upgrading from dataTables 1.10.16 to 1.10.21. I originally had this same problem with 1.10.16 here:
https://datatables.net/forums/discussion/comment/128399/#Comment_128399
with a fix provided here: https://github.com/DataTables/Buttons/commit/14d5f634cdcb41db7282f7fab3460a7e0bd31c23

With upgrading, I am seeing the problem again. Per this discussion, it looks like maybe someone else had this problem as well: https://datatables.net/forums/discussion/comment/172496/#Comment_172496
The live example mentioned that would fix it: http://live.datatables.net/nisileqa/1/edit seems to still have the problem?

colin

It looks like you're not using the nightly CSS in that example, you would need to use that too.

Colin

lisarush

Well, I did not actually create that test case. It was referenced from one of your developers as an example of it being fixed...

lisarush

I have fixed this for my case by adding the following to our extension:

 opts.buttons.push( { extend: 'colvis',
           ...
           collectionLayout: 'dt-button-right' // added this line
 } );

colin

Thanks for posting back.

Colin

lechonex

Adding the class fixed the issue for me with the latest version of Buttons (1.6.5) but this was working fine automatically before, so I guess there is still a bug there, don't you think so?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin