Bootstrap buttons - className value is not overriding base value "btn btn-default"

Infolabs

Hello,
I'm using editor datatables with bootstrap.
I would like to define 2 buttons for my editor modals (a "cancel" button and a "submit" button, styled with 2 different classes).

In my editor initialization options i have

[...]
                    formOptions: {
                        main: {
                            buttons: [
                                {
                                    text: 'Chiudi',
                                    action: function () {
                                        this.close();
                                    }
                                },
                                {
                                    text: 'Conferma',
                                    className: 'btn btn-primary',
                                    action: function () {
                                        this.submit();
                                    }
                                }
                            ]
                        },
                        inline: {
                            onBlur: 'submit',
                            submit: 'allIfChanged'
                        }
                    }
[...]

All is working file, but in the rendered buttons I see something like this:

<div data-dte-e="form_buttons" class="DTE_Form_Buttons"> <button class="btn btn-default" tabindex="0">Chiudi</button> <button class="btn btn-default btn btn-primary" tabindex="0">Conferma</button> </div>

The "submit" (Conferma) button still have the btn-default class, and doesn't styles correctly.

Can anyone help me with this?

Thanks

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

allan

Yes, the way the className property works is to combine the value of that property with that from $.fn.dataTable.Editor.classes.form.button - the reason for this is so that we can provide a base (e.g. btn) for the styling and then customise it using className. We've got a bit of a mix up in our defaults there which I'll look at, but for the moment use:

$.fn.dataTable.Editor.classes.form.button = 'btn';

and then will ensure that btn-default is not added by default.

Allan

Infolabs

This solved my problem!
Thanks Allan