Auto Scroll to bottom when item added to editableList not work in my custom node

Developing Nodes
1

hi
Auto Scroll to bottom not work for me
all other node work for me
this issus only in my custom node
so I add this code to update scrolltop when new item added
but scrolltop value never update !
what's wrong I cant fix That some help pls !!!!

var elem = document.getElementById('node-input-DigitalInputMapping-container');
                    elem.scrollTop = elem.scrollHeight - elem.clientHeight;
                    console.log(elem.scrollTop);

Sans titre
Sans titre599×514 13.9 KB

this html section

<div id="config-client-tab-mapping" style="display:none"> 
            <div id="config-client-section-DI">
                <div class="red-ui-palette-header">
                    <label> <i class="fa fa-angle-down"></i><span data-i18n="common.label.DI-message"></span>Digital Input</label>
                </div>
                <div class="section-content" style="padding:10px 0 0 10px"> 
                    
                    <ol id="node-input-DigitalInputMapping-container"></ol>
                   
                </div>
            </div>
......

this container

            $('#node-input-DigitalInputMapping-container')
            .css('min-height','270px')
            .css('min-width','450px')
            .css('max-height', '270px')
            .editableList({
                sortable: false,
                removable: true,
                addButton: true,
                header: $("<div>").css({"margin-left":"6px"}).append($.parseHTML(
                    "<div style='width:11%; margin-left:5px; display: inline-grid'><b></b></div>" +
                    "<div style='width:18%; margin-left:1px; display: inline-grid'><b>Name</b></div>" +  
                    "<div style='width:31%; margin-left:1px; display: inline-grid'><b>IO Address</b></div>" +  
                    "<div style='width:30%; margin-left:1px; display: inline-grid'><b>Comment</b></div>" 
                )),
                addItem: function(container, index, DI) {
.......
2

What version of node-red? This works for me on NR 2.2.2 (test it yourself on the inject node or change node)

In simple terms, you shouldn't need to anything.

3

2.1.4
all other node work for me
i have this issus only in my custom node

4

Without seeing your code (all of it) it is hard to say. Is the repository public?

long shot...

there is a boolean option named scrollOnAdd. If missing, it should default to true.
Look through your code - do you set this false? If so, change to true, if not, try adding it to the editableList options object.

.editableList({
                scrollOnAdd: true,
                sortable: false,
                removable: true,
                addButton: true,
5

I've tried it before
do not work
I upldaoded in public repository

sample flow code

[
    {
        "id": "b88fd13a19164b9b",
        "type": "debug",
        "z": "dee5f14d83c7dbf7",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 530,
        "y": 140,
        "wires": []
    },
    {
        "id": "30f6de6b562abf61",
        "type": "inject",
        "z": "dee5f14d83c7dbf7",
        "name": "start",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Controller",
        "payload": "true",
        "payloadType": "bool",
        "x": 230,
        "y": 140,
        "wires": [
            [
                "1cf98910adb4d5e5"
            ]
        ]
    },
    {
        "id": "28a669f717cb128f",
        "type": "inject",
        "z": "dee5f14d83c7dbf7",
        "name": "stop",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "Controller",
        "payload": "false",
        "payloadType": "bool",
        "x": 230,
        "y": 180,
        "wires": [
            [
                "1cf98910adb4d5e5"
            ]
        ]
    },
    {
        "id": "1cf98910adb4d5e5",
        "type": "Client",
        "z": "dee5f14d83c7dbf7",
        "name": "",
        "Config": "82834adc4fbb4cec",
        "x": 390,
        "y": 160,
        "wires": [
            [
                "b88fd13a19164b9b"
            ],
            [],
            []
        ]
    },
    {
        "id": "82834adc4fbb4cec",
        "type": "ClientConfig",
        "LatestIOA": 0,
        "name": "rtu",
        "ASDUAddrLeng": "1",
        "ASDUAddr": "1",
        "IOAaddrLeng": "1",
        "COTaddrLeng": "1",
        "OriginAddr": "0",
        "LinkAddrSize": "1",
        "LinkAddr": "1",
        "LLMode": "1",
        "RepateTimeout": "5000",
        "ACKTimout": "5000",
        "SingelChar": "1",
        "TestLinkLayer": "20",
        "PeriodicityGCI": "1",
        "PeriodicityGI": "1",
        "PeriodicitySync": "1",
        "PeriodGCI": "30",
        "PeriodGI": "30",
        "pooling": "500",
        "PeriodSync": "30",
        "ApplicationLayerMsg": {},
        "DataLinkLayerMsg": {},
        "GeneralCounterInterrogationMsg": {},
        "GeneralInterrogationMsg": {},
        "ParametersMsg": {},
        "SynchronizationMsg": {},
        "DigitalInputMapping": []
    }
]
6

Would have been nice to tell me which file in your repo or provided a perma-link :man_shrugging: never mind...

I found this https://github.com/d0d04m3/node-red-contrib-iec-60870-101/blob/48ee1e947a4952e4755b05fe400b66124d3fff46/src/nodes/iec101Client.html#L432

elem.scrollTop = elem.scrollHeight - elem.clientHeight;

Try removing it.
The scrollToTop option of the editableList should do the scrolling automatically.

PS what browser are you using? Have you tried a different browser or different computer? Do you see any errors in the browser console?

7

The problem occurred before I added this code
so The solution is not to delete it
I don't think the problem is with the browser
Because the rest of the nodes does not have this problem, but I tried and no result

8

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