Show table in custom node config screen

Developing Nodes
1

Hi folks,

I have added a table to my config screen:

    <div class="form-row">
        <label for="node-input-areas"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <table>
                <tr>
                    <td>
                        <select id="node-input-area11"></select>
                    </td>
                    <td>
                        <select id="node-input-area12"></select>
                    </td>
                    <td>
                        <select id="node-input-area13"></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <select id="node-input-area21"></select>
                    </td>
                    <td>
                        <select id="node-input-area22"></select>
                    </td>
                    <td>
                        <select id="node-input-area23"></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <select id="node-input-area31"></select>
                    </td>
                    <td>
                        <select id="node-input-area32"></select>
                    </td>
                    <td>
                        <select id="node-input-area33"></select>
                    </td>
                </tr>
            </table>
        </div>
    </div>

This results in following config screen:

image

However I expected it to appear AFTER the label (Area's), like this:

image

Does anybody know how I can achieve that?

It is not a life threatening issue, but it would be nice if all the labels are at the left, and the user input widgets at the right ...

Thanks !
Bart

2

it's because of the table. Here is a example taken from the ui_text node for the layout that might be of help

    <div class="form-row">
        <label style="vertical-align: top"><i class="fa fa-th-large"></i> Layout</label>
        <div style="display:inline-block">
        <input type="hidden" id="node-input-layout"><input type="hidden" id="node-input-layoutAlign">
        <div>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-left">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-center">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-right">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
        </div>
        <div>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-spread">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
            <a href="#" class="nr-db-text-layout nr-db-text-layout-col nr-db-text-layout-col-center">
                <span class="nr-db-text-layout-label">label</span>
                <span class="nr-db-text-layout-value">value</span>
                <div class="nr-db-text-layout-checkbox"></div>
            </a>
        </div>
        </div>
    </div>
3

Hey Paul (@zenofmud),

Awesome!! This works fine. Didn't know you were a retired CSS scientist :joy:
Normally I ask 'why' this solution works better, but I will just accept it this time.
Like reading in the bible ...

This is my new implementation:

    <div class="form-row">
        <label for="node-input-areas" style="vertical-align: top"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="display:inline-block; width:67%; background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <div>
                <select id="node-input-area11" style="width:32%;"></select>
                <select id="node-input-area12" style="width:32%;"></select>
                <select id="node-input-area13" style="width:32%;"></select>
            </div>
            <div>
                <select id="node-input-area21" style="width:32%;"></select>
                <select id="node-input-area22" style="width:32%;"></select>
                <select id="node-input-area23" style="width:32%;"></select>
            </div>
            <div>
                <select id="node-input-area31" style="width:32%;"></select>
                <select id="node-input-area32" style="width:32%;"></select>
                <select id="node-input-area33" style="width:32%;"></select>
            </div>
        </div>
    </div>

This is the result, which even resizes very nicely:

cam_layout

Thanks a lot !!!
Bart

1 Like
4

If you look at the node-input-areas <div>, it has a custom style:

 style="display:inline-block; width:67%; background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;"

Without that, it would have done exactly the same as the <table> - as their default style is to be a block that fills 100% width.

So you could have fixed this by applying a similar custom style to the <table> - in particular: style="display: inline-block; width: 67%" would likely have done it.

5

though the wide border is a bit yuk - hopefully just for debug :slight_smile:

6

Hey Nick (@knolleary),
When I add that style to the table:

<div class="form-row">
        <label for="node-input-areas"><i class="fa fa-table"></i> Area's</label>
        <div id="node-input-areas" style="background-color:lightgrey;border-radius: 5px; padding: 5px; border: 3px solid #ccc;">    
            <table style="display: inline-block; width: 67%">
                ...

Then I get this:

image

I don't doubt your plan B works, but most probably I have done something else wrong...

But forget about it !!
I don't want to be the cause that version Node-RED version 0.21.0 (with pluggable message routing) cannot be released in 2 months from now :joy: :joy: