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

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

InfolabsInfolabs Posts: 13Questions: 4Answers: 0
edited June 29 in Buttons

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 54,528Questions: 1Answers: 8,526 Site admin
    Answer ✓

    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

  • InfolabsInfolabs Posts: 13Questions: 4Answers: 0

    This solved my problem!
    Thanks Allan

Sign In or Register to comment.