Editor Form Buttons Class Override.

Editor Form Buttons Class Override.

CraigJCraigJ Posts: 28Questions: 12Answers: 2

I'm using Bootstrap 4, the latest Datatables (from CDN) and Editor.

I'm having a problem overriding the classes for the form buttons that appear in the dialog. For example, I have:

{   extend: 'edit',
    editor: _this.main_editor,
    formTitle: "Update Opportunity",
    className: "btn btn-primary",
    formButtons: [
        {
            label: 'Update Opportunity',
            className: 'btn btn-primary',
            action: function () { this.submit(); }
        },
        {
            label: 'Cancel',
            className: 'btn btn-secondary ',
            action: function () { this.close(); }
        }
    ]
}

Yet the form buttons render as

<button class="btn btn-outline-secondary btn btn-primary" tabindex="0">Update Opportunity</button>
<button class="btn btn-outline-secondary btn btn-secondary" tabindex="0">Cancel</button>

For the buttons related to the table itself: (create, edit, remove ), I can do this:

buttons: {
    dom: {
        button: {
            tag: "button",
            className: ""
        }
    },

This removes the default classes and the buttons render with only the classes specified in className.

I cannot figure out how to achieve this for the form buttons.

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 49,733Questions: 1Answers: 7,345 Site admin
    Answer ✓

    Hi,

    What version of Editor are you using? That issue should have been resolved in 1.9.0 which was released a week or two ago.

    Thanks,
    Allan

  • CraigJCraigJ Posts: 28Questions: 12Answers: 2

    Looks like I just upgraded it to 1.8.1 on 3/7. I'll try 1.9.0 and update this when I get that done.

    Does the dom setting in the buttons object apply to formButtons too, or is there another setting for formButtons? As in, will this apply to formButtons as well as the create, edit, etc?

    buttons: {
        dom: {
            button: {
                tag: "button",
                className: ""
            }
        },
    

    Thanks,
    Craig

  • CraigJCraigJ Posts: 28Questions: 12Answers: 2
    Answer ✓

    I answered my own questions, simply upgrading to 1.9.0 did in fact correct the issue.

    Thanks!

Sign In or Register to comment.