# Need a little help with custom node config UI & editor resizing

**URL:** <https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120>\
**Category:** Developing Nodes\
**Created:** [23 May 2020 09:00 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120 "2020-05-23T09:00:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [23 May 2020 09:00 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/1 "2020-05-23T09:00:49Z")

</div>

I`m not a web/html expert. Perhaps someone has easy solution.

I have a config dialog with tabs. On one (later more) I want to place a JSON editor. Should look like this:

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

Now I face the problem resizing the editor vertically when the size of the tab changes.

```auto
    oneditresize: function(size) {
      var otherRows = $("#dialog-form>div:not(.homie-node-tab-config)");
      var rows = $("#homie-node-tab-config>div:not(.node-text-editor-row)");
      var height = $("#homie-node-tab-config").height();
      for (let i=0; i<rows.size(); i++) {
          height -= $(rows[i]).outerHeight(true);
      }
      height += 1; // otherwise the editor shrinks in height by 0.9 pixel when resizing horizontal
      $(".node-text-editor").css("height",height+"px");
      this.editor.resize();
    }

```

This works in the beginning but do not scale the editor vertically because the `$("#homie-node-tab-config").height()` is not the actual height of the tab, it is the height of all the elements : "homie node configuration" line + the current editor - so somehow constant.  
Do I always have to start from `$("#dialog-form").height();` and subtract all other elements (which is more complex if you have child objects as for the tabs)? I suspect that the "gross div" of the tab simply does not exist.  
I think I can do that but I thought I ask the experts before digging deeper.

Thank you for any help.

Chris

Here is the HTML portion:

```auto
    <div class="form-row">
      <label for="node-input-name"><i class="icon-tag"></i> Name</label>
      <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
      <label for="node-input-broker"><i class="fa fa-exchange"></i> Broker</label>
      <input id="node-input-broker">
    </div>

    <div class="form-row">
      <ul style="min-width: 600px; margin-bottom: 20px;" id="node-homie-node-tabs"></ul>
    </div>

    <div id="node-homie-node-tabs-content" style="min-height: 170px;">

      <div id="homie-node-tab-basic" style="display:none">
... content of the first tab
      </div>

      <div id="homie-node-tab-config" style="display:none">
        <div class="form-row" style="margin-bottom:0px;">
          <label for="node-input-homieNodeConfig" style="width: 70%;"><i class="fa fa-wrench"></i>&nbsp;homie&nbsp;node&nbsp;configuration</label>
          <input type="hidden" id="node-input-homieNodeConfig">
          <button id="node-config-expand-editor" class="red-ui-button red-ui-button-small" style="float:right"><i class="fa fa-expand"></i></button>
        </div>
        <div class="form-row node-text-editor-row">
            <div style="height: 500px; min-height:150px;" class="node-text-editor" id="node-input-homieNodeConfig-editor"></div>
        </div>
      </div>
   </div>

```

---

<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 2020 10:00 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/2 "2020-05-23T10:00:11Z")

</div>

You're close see [this](https://github.com/bestlong/node-red-contrib-mssql-plus/blob/ae19209c9ae9987d3f1b8cf422a43877adbce857/src/mssql.html#L320) as an example

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [23 May 2020 10:33 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/3 "2020-05-23T10:33:13Z")

</div>

Thank you for the example. The problem is that the editor is "nested" inside a tab. So I think I have to subtract all elements, outside and inside the tab in two loops (or write a recursive function - a little overkill perhaps):

```auto
    oneditresize: function(size) {
      var height = $("#dialog-form").height();
      var rows = $("#dialog-form>div:not(#node-homie-node-tabs-content)");
      for (let i=0; i<rows.size(); i++) {
        height -= $(rows[i]).outerHeight(true);
      }
      rows = $("#homie-node-tab-config>div:not(.node-text-editor-row)");
      for (let i=0; i<rows.size(); i++) {
          height -= $(rows[i]).outerHeight(true);
      }
      var editorRow = $("#homie-node-tab-config>div.node-text-editor-row");
      height -= (parseInt(editorRow.css("marginTop")) + parseInt(editorRow.css("marginBottom")));
      console.log(height);
      $(".node-text-editor").css("height",height+"px");
      this.editor.resize();
    }

```

Works! But only during resize (horizontal or vertical). On the first appearance the result is 26 pixels to big:

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

As soon as I resize all is fine:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/928b3e9139486e7df47dc60d42e8eea734d29a23.png)  
Perhaps this is caused by the fact that the editor is on the second tab and not visible at first?

---

<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 2020 11:21 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/4 "2020-05-23T11:21:32Z")

</div>

We did something similar on the ui\_svg node (you'll note a helper function I wrote that resizes any div with a particular class to fit remaining space on each of the tabs)

[The helper](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/353b70f2cec7599e6f5841cc3ebe3f59b99c06e2/svg_graphics.html#L231) function

[A div with form-row-auto-height class](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/353b70f2cec7599e6f5841cc3ebe3f59b99c06e2/svg_graphics.html#L1508) on a tab

Maybe they can help?

---

<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 2020 15:52 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/5 "2020-05-24T15:52:06Z")

</div>

I had similar problems with the editor in uibuilder. Might be worth taking a look there too.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [24 May 2020 18:01 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/6 "2020-05-24T18:01:41Z")

</div>

Thank you for your help ... will do that. I think I have found a workaround for now.

But I face a new problem. How can I determine which tab is actually visible? Poked around with the debugger but found no suitable data. I need the tabs.id I will get with the RED.tabs.onchange method.

---

<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:** [24 May 2020 18:04 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/7 "2020-05-24T18:04:29Z")

</div>

Like [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/353b70f2cec7599e6f5841cc3ebe3f59b99c06e2/svg_graphics.html#L418)?

Or do you mean outside of onchange event?

You might have to keep track with a member variable.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [24 May 2020 19:31 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/8 "2020-05-24T19:31:59Z")

</div>

I was thinking about outside then onchange event. But I can keep track myself as the onchange event does the actual switching - good idea. Thx

---

<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:** [23 July 2020 19:32 UTC](https://discourse.nodered.org/t/need-a-little-help-with-custom-node-config-ui-editor-resizing/27120/9 "2020-07-23T19:32:02Z")

</div>

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