EditForm Dialog without style

I don’t use bootstrap in my application, because if I do it brokes many things. To manage that, I used the following to make the FormBuilder style works:

:host ::ng-deep {
  @import "~bootstrap/scss/bootstrap";
  @import "~formiojs/dist/formio.builder";
}

And it does work! But the EditForm dialog is appended to the body, so it doesn’t get the bootstrap styles. Is there any way I can append the edit form inside my component instead of the body?

Thanks in advance for your help!

[aiwebb]

@felipebelluco, here’s an example JSFiddle:

https://jsfiddle.net/zqr9Ljsv/3/

[aiwebb]

@felipebelluco, the WebformBuilder is calling Base.createModal() from here:

https://github.com/formio/formio.js/blob/3983c3b33c625a4cdad97848354a5ec36027f95c/src/WebformBuilder.js#L320

Base.createModal() is attaching the modal to the body here:

https://github.com/formio/formio.js/blob/3983c3b33c625a4cdad97848354a5ec36027f95c/src/components/base/Base.js#L698

You may want to override Base.createModal() to fire an event when the modal is created - that way you can hook into the creation of that dialog and immediately move it as needed. Something like this:

Base.prototype.createModal_original = Base.prototype.createModal;
Base.prototype.createModal = function(name) {
  let dialog = Base.prototype.createModal_original();

  document.dispatchEvent(new CustomEvent('modal-created', {name, dialog}));

  return dialog;
}