Is there a way to remove the default button style for a specific button?

Charley

I'm adding a button that looks something like this

{
"text":"Create New",
"className":"btn-primary",
"url":"/est/secure/invoices/EditExpenses.do?invoiceId=1861&newSalaryCost=true",
action:function ( e, dt, node, config ) {location=config.url;}
}

the end result is something like
<button tabindex="0" class="btn btn-secondary btn-primary pull-right" aria-controls="DataTables_Table_0" type="button"><span>Create New</span></button>

notice that both secondary (the default button style) and btn-primary (my button style) are getting added

I'm sure I could remove the secondary class using jquery after it's instantiated $(".btn-secondary.btn-primary").removeClass("btn-secondary")

but it would be nice if either
1. it paid attention that I'm specifying a button class and didn't add btn-secondary automatically
2. or there was a mechanism to specify that the default button class shouldn't be added

looking at the source (1.10.18), I'm not seeing anything that looks promising

colin

Hi @Charley ,

If you look at this example here, I used Bootstrap libraries and aren't seeing those classes. There was some chat on SO in this thread though that also mentioned it, and with a couple of solutions.

If that thread doesn't help, could you modify my example to demonstrate the problem, please, and we'll take a look,

Cheers,

Colin

Charley

there are some issues with your example which make me wonder if you have something misconfigured in it (and therefore aren't actually getting the bootstrap styling). multuiple sorting icons, for example.

Charley

Here's a fiddle with an example of the issue

https://jsfiddle.net/charleycartee/aep2qfz5/13/

3 buttons

The first should be btn-primary, but btn-secondary overrides it (because of the order that bootstrap has those in it's css)

allan

1. or there was a mechanism to specify that the default button class shouldn't be added

You can use dom.button.className for that. By default in the Bootstrap 4 integration it is btn btn-secondary. You probably want to change it to just be btn.

Your example updated with that: https://jsfiddle.net/aep2qfz5/18/ .

As the documentation for dom.button.className notes:

The class name defined here is added to the class name defined by buttons.buttons.className.

The idea there being that is is cumulative. Useful in most cases, not so much in this case.

Regards,
Allan

Charley

works in the fiddle (though even there it should be 'btn' not ''),

Edit, I had a typo. Fixed and that works like a charm

I had already kind of worked around it by switching everything to btn-outline-Blah classes, which have precedence over btn-secondary. Also, it deals with the fact that those default btn-secondary grey buttons are really heavy visually.