# Make "Expand" button on function node config the same as on template node

**URL:** <https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197>\
**Category:** Feature Requests\
**Tags:** editor\
**Created:** [23 May 2024 12:56 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197 "2024-05-23T12:56:02Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 May 2024 12:56 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/1 "2024-05-23T12:56:02Z")

</div>

On a function node the Expand button is at the top of the scrollbar  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd5cddde7efe1c9921c180c93eecbe358cb66aa6.png)

If you move the scrollbar and drop it partly overlaying the button, The editor _usually_ prioritises the scrollbar and fails to offer "Expand".  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4f58bd291804d28ca7d91200a743dd3e8de41de.png)

.  
In contrast, a template node has the button above the scrollbar  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/cc3a59caa9d6ae8c3101e97b20cfeb9e9c427b90.png)

.  
**Proposed enhancement**  
Please move the function button so that it does not conflict with the scrollbar. Either between or to the right of the tab labels.  
Alternatively, move the top of the scrollbar below the button

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 May 2024 14:04 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/2 "2024-05-23T14:04:01Z")

</div>

+1 for making some change. Recently I seem to keep missing the button so I wonder whether something has changed.

---

<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:** [23 May 2024 14:39 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/3 "2024-05-23T14:39:58Z")

</div>

Yeah, I've poked at this a couple times over the years and not quite hit a satisfactory result.

One issue is there not quite enough space above the code editor in the Function node to fit the resize button when we want to maximise the vertical space give to the code editor.

We can't move the scrollbar as that is all part of the monaco widget - the expand button is one we are overlaying above it.

Will have another stare at it.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 May 2024 18:22 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/4 "2024-05-23T18:22:02Z")

</div>

The button itself is in a div, sadly with no class or id but inline style  
`<div style="position: absolute; right:0; bottom: calc(100% - 20px); z-Index: 10;">`

Changing it to `top : -22px` moves it above the scrollbar (on my browser, on my PC) but no doubt there's a good reason for the position being relative to the bottom.

And the tab labels can be made slightly narrower to leave a bit more space.

---

<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:** [23 May 2024 18:29 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/5 "2024-05-23T18:29:38Z")

</div>

Even without changing the tabs, the min-width of the panel would seem to be able to acommodate the widget?

Current:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c053baf89c87ed66fef79040de7d32ede756fba9.png)

Idea:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/554a8a3c0e6a9d2ac1a0a28f37f2acbd89ac1deb.png)

```auto
    position: absolute;
    bottom: calc(100% - 0px);
    right: -1rem;
    z-Index: 10;

```

And yes, I know that the bottom calc is rather over-specified here. 🙂

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 May 2024 19:40 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/6 "2024-05-23T19:40:10Z")

</div>

Alternatively, the button could easily be removed and added to the F1 menu or the right click context menu of the code editor. 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 May 2024 20:05 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/7 "2024-05-23T20:05:53Z")

</div>

Hmm. I don't like that!

There is space at the top of the Monaco widget to the left of the line numbers, but I think the template node would need to be changed too if you picked that option

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 May 2024 20:32 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/8 "2024-05-23T20:32:21Z")

</div>

> [@jbudd](#):
>
> Hmm. I don't like that

I didn't think many would TBF, just putting it in the mix.

---

<div class="post-metadata">

**Author:** ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)\
**Post date:** [23 May 2024 21:05 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/9 "2024-05-23T21:05:22Z")

</div>

What if the scrollbar started just below the "expand" button?

I think a `top: 20px` would do it.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 May 2024 21:08 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/10 "2024-05-23T21:08:43Z")

</div>

> [@mbonani](#):
>
> What if the scrollbar started just below the "expand" button

I think the scroll is part of Monaco editor. Not sure if it can be affected by CSS or if it is programmatically set by Monaco. Also, the solution needs to take ACE into account.

---

<div class="post-metadata">

**Author:** ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)\
**Post date:** [23 May 2024 21:19 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/11 "2024-05-23T21:19:43Z")

</div>

I thought ACE would be removed in NR 4.0.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 May 2024 21:39 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/12 "2024-05-23T21:39:33Z")

</div>

I hoped it would be too but I've not had time to add an alternative or a scaled down backup (aka textarea)

---

<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:** [24 May 2024 08:49 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/13 "2024-05-24T08:49:58Z")

</div>

In the meantime, people can "simply" add the CSS adjustment themselves if they want to move the widget as suggested above. 🙂

---

<div class="post-metadata">

**Author:** ![Skaedian](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/skaedian/32/85790_2.png) [@Skaedian](https://discourse.nodered.org/u/Skaedian)\
**Post date:** [26 June 2024 06:53 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/14 "2024-06-26T06:53:41Z")

</div>

_bump_ I would also like this issue to be addressed. My team works in function nodes a lot. Some shortcut or GUI adjustment will be welcome. 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 August 2024 06:53 UTC](https://discourse.nodered.org/t/make-expand-button-on-function-node-config-the-same-as-on-template-node/88197/15 "2024-08-25T06:53:43Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.