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

[Christian-Me]

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:

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

    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:

    <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>

[Steve-Mcl]

You're close see this as an example

[Christian-Me]

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):

    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:

As soon as I resize all is fine:

Perhaps this is caused by the fact that the editor is on the second tab and not visible at first?

[Steve-Mcl]

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 function

A div with form-row-auto-height class on a tab

Maybe they can help?

[TotallyInformation]

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

[Christian-Me]

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.

[Steve-Mcl]

Like this?

Or do you mean outside of onchange event?

You might have to keep track with a member variable.

[Christian-Me]

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