Custom Class Name on Editor (Edit) form.

hgf_it

I'm trying to extend the width of the editor form when opening a row in edit mode. I am using bootstrap styling on my editor instance. The problem I have is that if I want to override the CSS "width" property of the form then the class I currently have to do this on is .modalDialog.

This is not a good solution as our application uses modal dialogs in lots of places, applying CSS to this class would have negative effects on the rest of the application.

Is there a way to add a custom class to the modal-dialog editor form?

See below an example of the HTML:

colin

You can use open to add a class to the form. This example from this thread is doing something similar, here it's just adding CSS directly to make the form wider.

Colin

hgf_it

Thanks for the advice.

I went with your advice and hooked in to the open event and added a class to the modal-dialog to apply styling. In my case, I was using a custom template for my editor form so I knew the class that I'd added to that so I used a jQuery selector to get the closest .modal-dialog based on that class. See example below:

this.editor.on('open', () => {
    $('#internal-checks-editor')
        .closest('.modal-dialog')
        .addClass('internal-checks-editor-form');
})

allan

It is actually possible to do this without waiting for an event. The displayNode() method will give you the node that Editor is using for the modal. You can then add a class to it, or one of its child elements.

Regards,
Allan