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

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

paul@dmcreative.compaul@dmcreative.com Posts: 27Questions: 5Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • paul@dmcreative.compaul@dmcreative.com Posts: 27Questions: 5Answers: 0

    The prior Question relates to using Bootstrap 4 styling

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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.compaul@dmcreative.com Posts: 27Questions: 5Answers: 0

    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.compaul@dmcreative.com Posts: 27Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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.compaul@dmcreative.com Posts: 27Questions: 5Answers: 0

    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(); },

This discussion has been closed.