Modal window breaks page layout

[laurens94]

Thanks for making and maintaining this project! I just switched from the old jsoneditor to vanilla-jsoneditor and it's a great replacement. 👍 However, the modal windows behave quite differently now and seem to break the layout.

When opening a modal window (by clicking on the Sort or Transform Contents buttons), the following inline styling is being applied to the body element:

  position: fixed;
  top: 0px;  // (this is a dynamic value)
  overflow: hidden;
  width: 100%;

This can break some complex layouts, e.g. when the json editor is nested in a container that has contain: layout; applied, which prevents the modal to break out of it.

It would be great to have this behaviour configurable, such as:

• Being able to prevent the automatic setting of inline-styling on the body element
• Being able to specify a target element to which the modal should be a child of (e.g. document.body)

[josdejong]

Thanks for your inputs Laurens!

This behavior originates in svelte-simple-modal, and is not customizable (right now):

https://github.com/flekschas/svelte-simple-modal/blob/9ea6895736a80b49e4f0bf055ccbe4c64c64d8a4/src/Modal.svelte#L420-L423

It makes sense to make customize this behavior, but we'll have to discuss with the author of svelte-simple-modal. Can you open an issue there?

On a side note: I'm really looking forward try replacing the modals with the relatively new HTML <dialog> element, I hope that will work out. Help would be welcome.