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

**URL:** <https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283>\
**Category:** General\
**Created:** [21 March 2019 16:46 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283 "2019-03-21T16:46:41Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![gbove731](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gbove731/32/8128_2.png) [@gbove731](https://discourse.nodered.org/u/gbove731)\
**Post date:** [21 March 2019 16:46 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/1 "2019-03-21T16:46:41Z")

</div>

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

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 March 2019 16:50 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/2 "2019-03-21T16:50:16Z")

</div>

> [@gbove731](#):
>
> Is there a way to resize to full page the node edit form

No there isn't.

> [@gbove731](#):
>
> (of a custom palette)

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 March 2019 17:03 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/3 "2019-03-21T17:03:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 March 2019 17:27 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/4 "2019-03-21T17:27:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gbove731](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gbove731/32/8128_2.png) [@gbove731](https://discourse.nodered.org/u/gbove731)\
**Post date:** [22 March 2019 08:37 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/5 "2019-03-22T08:37:48Z")

</div>

Can you post a code example?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 March 2019 09:23 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/6 "2019-03-22T09:23:04Z")

</div>

I can do better than that. 🙂

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

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v2/nodes/uibuilder.html#L422-L438>

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.

---

<div class="post-metadata">

**Author:** ![gbove731](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gbove731/32/8128_2.png) [@gbove731](https://discourse.nodered.org/u/gbove731)\
**Post date:** [22 March 2019 10:27 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/7 "2019-03-22T10:27:49Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 March 2019 10:47 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/8 "2019-03-22T10:47:30Z")

</div>

I think you have set the wrong element.

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

---

<div class="post-metadata">

**Author:** ![gbove731](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gbove731/32/8128_2.png) [@gbove731](https://discourse.nodered.org/u/gbove731)\
**Post date:** [22 March 2019 10:54 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/9 "2019-03-22T10:54:03Z")

</div>

You are right, it finally solved my problem:

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

```

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 March 2019 11:28 UTC](https://discourse.nodered.org/t/solved-is-there-a-way-to-resize-to-full-page-the-node-edit-form/9283/10 "2019-03-22T11:28:40Z")

</div>

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