Resizing table window/pop up size

[echan00]

First off, table mode is the key awesome-ness of this library. Props!!

I'm hoping to resize the table pop up window to review and edit more data at once.

Editing the css .bg.jse-modal-bg .jse-modal-window.jse-modal-window-jsoneditor will allow for this but its not part of the styling options: https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/themes/defaults.scss

What are my options?

[josdejong]

Thanks, good to hear, I love it myself too, since so many JSON data I work with is in tabular form 😎

You can indeed override the styling of jse-modal-window jse-modal-window-jsoneditor.

I'm not totally happy with the current sizing of the Modal. I made it not too large so it is a "popup" and you can still see the web application behind it. However, if you open an embedded table view with a large amount of data, you would like to use more space. Maybe the best solution is to create a "full screen" button in the top right of the modal, so you can toggle this yourself. What do you think?

[echan00]

Yes I think a full screen button is a great simple addition. But instead of a pop up think it should just take up the entire window area underneath the toolbar like the tree and text views.

How would I override the styling? This doesn't seem to work..

<style>
  .jse-modal-window.jse-modal-window-jsoneditor 
  {
      width: 100%;
      height: 100%;
      min-height: 900px;     
  }    
</style>

EDIT: also tried this without luck...

<style>
    :global(.jse-modal-window.jse-modal-window-jsoneditor)
    {
        width: 100%;
        height: 100%;
        min-height: 900px;
    }
</style>

[echan00]

Ended up going with the React version to save myself the trouble with svelte 👍

[josdejong]

Support for fullscreen is now published in v0.23.1 (see #420)