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

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

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) {
.......

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.

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

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,

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": []
    }
]

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

I found this node-red-contrib-iec-60870-101/iec101Client.html at 48ee1e947a4952e4755b05fe400b66124d3fff46 · d0d04m3/node-red-contrib-iec-60870-101 · GitHub

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?

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

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