How to change class name for Excel button?

Noodles12

I am using Datatables with buttons plugin. How do I give a custom class name to Excel button?

I tried this but it doesn't work properly - example background color -
extend: 'excelHtml5', className: 'mybutton',

Here is the link to my test case.

https://live.datatables.net/qoxoweca/6/edit

Thanks.

colin

Yep, that's working - that's why the Excel button is wide and the others aren't. I'm not sure why the colour isn't changing though.

Colin

allan

Its a CSS specificity issue - the more specific the selector is, the higher its priority. At the moment the built in DataTables Buttons selector is winning out over your own. If you make it more specific using a.mybutton, then yours would "win" (updated example).

Its an interesting topic (well - to me, I suspect Colin would start snoring as soon as I mention "CSS specificity" ), and you can find more info about it on MDN.

Allan

Noodles12

Thanks, Allan. I think still some of the properties are not applied. For example- background color.

allan

We use background-image in our default CSS to apply a little gradient. You need to override that as well: https://live.datatables.net/datubino/3/edit .

Right click on the button and select "Inspect" to see what styles are being applied by what selectors.

Allan

Noodles12

Thankyou so much!

Noodles12

I ended up removing the default class by adding this code instead- This was easier than overwriting default styles.

init: function( api, node, config) {
$(node).removeClass('dt-button buttons-excel buttons-html5');
},

allan

Fair enough . Good to hear you got a solution.

Allan