[Solved] Is there a way to resize to full page the node edit form?

General
1

Is there a way to resize to full page the node edit form (of a custom palette) programmatically?

Thanks in advance.

2

No there isn't.

Just fyi - its custom 'node' not palette. The palette is the thing on the left of the editor screen and is the collection of all nodes you have installed.

3

I managed to reproduce the full-screen ACE editor that is used in various places if that is of use. I mirrors the same method that the function node uses.

4

Right - being able to expand a text editor is something that is doable. But expanding the edit dialog as-is to the full width is not something you can do directly.

1 Like
5

Can you post a code example?

6

I can do better than that. :slight_smile:

Here is the code that actually handles the button that moves to full-screen.

However, you need to note that, overall, the code is reasonably complex because we have to handle the references to the ACE editor. I've taken a slightly different approach than the function node in that respect as I don't need to retain the content of the ACE editor - I'm writing it back to a file using an API so that users don't have to do a Deploy on the node to get the new code active - that's because the code we are editing is for the browser ui not Node-RED and we can edit multiple files.

I'm also using a variable uiace that is "global" to the admin panel so that the contents of the editor and other settings such as the last file and cursor position are retained.

I'll be honest and say that I don't know how the "Done" or "Cancel" buttons on the expanded edit panel work as I've not been able to track down where that is handled in the Node-RED source code. However, it just seems to work and does what is expected so that's fine.

7

Thanks a lot, but my need is to resize the edit form.
Btw I'm actually using jQuery / CSS in this way:

oneditprepare: function() {
            var winSize = $( window ).width() * 80 / 100; // set to 80%
            $('.editor-tray.ui-draggable').css({"width" : winSize +  "px"});
        }
8

I think you have set the wrong element.

You need to set the width of the div with the class editor-tray-content

1 Like
9

You are right, it finally solved my problem:

oneditprepare: function() {
            $('.editor-tray-content').css({"width" : $( window ).width() +  "px"});
        }

Thanks a lot.

10

You might want to actually put that in the oneditresize function in case the user changes the browser window size.

1 Like