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.

[laurens94]

After upgrading to [email protected] it seems to be fixed! 🥳

The only thing occuring now (at least in my project) is that the modal opens at the top-left of the window, instead of being centered. Applying a margin: auto; to the modal element fixed this for me 👍

[josdejong]

🎉 that's good to hear, thanks for letting me know.

Do you think the positioning issue is related to some CSS in your project, setting margin: 0 on all elements including dialog? I don't see the issues occur in plain and simple HTML examples. I guess I can add this margin: auto; anyway to be sure.

[laurens94]

Thanks for your fast reply! Yes it was definitely caused because of a CSS reset with * { margin: 0; }. I think it makes sense setting the margin: auto; manually, as most projects probably have a similar reset.

[josdejong]

Yes you're right, makes sense. I've added the margin: auto and published that 👍