Editor 1.9.0 Not adding class btn-outline-secondary to buttons in a form

paul@dmcreative.com

Upgraded a project from Editor 1.8 to 1.9 and form buttons no longer have an outline or hover shading.

Button using 1.8 would render as
<button class="btn btn-outline-secondary" tabindex="0">

Under 1.9 it renders as
<button class="btn" tabindex="0">

This behavior occurs with standard buttons and defined buttons.

Is this a bug or is it required now to set the class name for buttons?

paul@dmcreative.com

The prior Question relates to using Bootstrap 4 styling

colin

Hi @paul@dmcreative.com ,

The buttons look ok in this example here, unless I'm missing something. Could you modify that, or give instructions, to demonstrate the issue, please.

Cheers,

Colin

paul@dmcreative.com

Well now you have added more confusion.

Looking at the example you have provided the button class is now btn-primary, not btn-outline-secondary.

I am using both ajax and form templates that are not in your example. Over the weekend I will try and modify your example to better match my environment and see what the result it.

paul@dmcreative.com

I can reproduce the problem. It occurs when a formButton is added.

In the example replace the "edit" button with the following:

    { extend: "edit",   
      editor: editor,
      formButtons: [
        {
            label: 'Cancel',
            fn: function () { this.close(); }
        },
        'Save Changes'
      ]
    },

The Add form will display the buttons correctly, but the Edit form with the added buttons will not have the classes added to the buttons.

allan

Yes, there was a change in 1.9.0:

Bootstrap 4 styling for buttons had conflicting classes applied, resulting in rendering errors

You need to use the className option for the buttons if you aren't using the default styling: http://live.datatables.net/mavihabo/7/edit .

Allan

paul@dmcreative.com

Thanks Allan,

BTW in your example the submit button does not work unless you add the following to the submit button.

action: function () { this.submit(); },