adding css to collection button dropdown

adz

I created a collection button and populated the drop down with the table columns. I want to customize the action and the css on the dropdown list that appears. The dropdown is created dynamically. So I am not sure how to add css to it. This is what I tried. But it does not work.

buttons: [                        
                { 
                    extend: 'collection',
                        /* some code to create the buttons inside the collection */
                        
                       //the action the button should perform on click.
                       //override the original action to create the dropdown and add the css to the dropdown.
                       action: function (e, dt, node, config) {
                        var temp = $.fn.dataTable.ext.buttons.collection.action;
                        temp(e, dt, node, config);
                        $('div.dt-button-collection').css('dt-button-collection colvis-button-collection');
                                //some other actions
                    }
               }
]

1. Is this the way the css should be modified? How should I modify it?
2. Another problem I am facing is that the sometimes dropdown appears and quickly goes away when I click on the button. Any idea why this is happening?

Thanks!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Is this the way the css should be modified? How should I modify it?

Using $().css() as you have another, I don't think is valid jQuery. I think the above is trying to get a CSS property with the value given, which of course doesn't exist. I'm not quite clear on what you are trying to do with that line of code - add classes perhaps ($().addClass() would be used if so).

Rather than adding classes, can you just use the default classes and modify the stylesheet?

Another problem I am facing is that the sometimes dropdown appears and quickly goes away when I click on the button. Any idea why this is happening?

I'd need a test case to understand what is going wrong there.

Allan

adz

Thanks for the answer. I think I added a few attributes to the css classes. I do not know why the dropdown was behaving properly though.
As for the use case for the show/hide columns: I wanted to create a list of all the column headers that can be clicked on to show/hide. I did not use ColVis because there was some complex header hierarchy because of which I wanted to create my own drop-down list.