How to change class name for Excel button?

How to change class name for Excel button?

Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,117Questions: 1Answers: 2,583

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

    Thankyou so much!

  • Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

    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');
    },

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Fair enough :). Good to hear you got a solution.

    Allan

Sign In or Register to comment.