Editor buttons bootstrap 4 styling issue when changing the button label

CraigJ

The buttons for the editor are being created by the buttons extension when creating the DataTable. This is the default button:

<button class="btn btn-default btn-primary" tabindex="0">Create</button>

I'm adding a cancel button and changing the text of the create button:

buttons: [
    {   extend: 'create',
        editor: editor,
        formTitle: "Create New Lead",
        formButtons: [
            {
                label: 'Cancel',
                fn: function () { this.close(); }
            },
            'Create Lead'
    }
]

These buttons work, however they get the incorrect styling. They are not getting the "btn-primary" class as the default button is, so instead of the white on blue, they are black on white.

<button class="btn btn-default" tabindex="0">Create Lead</button>

So I do:

buttons: [
    {   extend: 'create',
        editor: editor,
                formTitle: "Create New Lead",
        formButtons: [
            {
                label: 'Cancel',
                className: 'btn-primary ml-2',
                fn: function () { this.close(); }
            },
            {
                label: 'Create Lead',
                className: 'btn-primary ml-2'
            }
        ]
    }
]

This creates the buttons with the correct class, but then the create button doesn't work, which I kind of expected.

I really want to add the cancel button for usability, but I need the buttons to have the blue primary color to match the rest of the application, not the black on white default color.

colin

Hi @CraigJ ,

I think this example here is doing what you're after. If you look at the "New" button, the two action buttons are now style blued. Hope that works for you,

Cheers,

Colin

CraigJ

Thank You!

This was the missing bit: action: function () { this.close(); }

I'd be curious to know where I should have looked in the docs for that piece of info.

colin

Hi @CraigJ ,

I pilfered it from this example

Cheers,

Colin