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

**URL:** <https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278>\
**Category:** Developing Nodes\
**Created:** [14 April 2022 10:50 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278 "2022-04-14T10:50:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [14 April 2022 10:50 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/1 "2022-04-14T10:50:34Z")

</div>

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

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

```

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

this html section

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

```auto
            $('#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) {
.......

```

---

<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:** [14 April 2022 10:53 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/2 "2022-04-14T10:53:36Z")

</div>

> [@d0d04m3](#):
>
> Auto Scroll to bottom not work for me

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.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [14 April 2022 10:56 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/3 "2022-04-14T10:56:30Z")

</div>

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

---

<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:** [14 April 2022 11:04 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/4 "2022-04-14T11:04:40Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [14 April 2022 11:53 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/5 "2022-04-14T11:53:06Z")

</div>

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

> **[GitHub - d0d04m3/node-red-contrib-iec-60870-101](https://github.com/d0d04m3/node-red-contrib-iec-60870-101)**
>
> Contribute to d0d04m3/node-red-contrib-iec-60870-101 development by creating an account on GitHub.

sample flow code

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

```

---

<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:** [14 April 2022 14:21 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/6 "2022-04-14T14:21:23Z")

</div>

Would have been nice to tell me which file in your repo or provided a perma-link 🤷‍♂️ never mind...

I found this [https://github.com/d0d04m3/node-red-contrib-iec-60870-101/blob/48ee1e947a4952e4755b05fe400b66124d3fff46/src/nodes/iec101Client.html#L432](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?

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [17 April 2022 08:45 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/7 "2022-04-17T08:45:33Z")

</div>

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

---

<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:** [16 June 2022 08:46 UTC](https://discourse.nodered.org/t/auto-scroll-to-bottom-when-item-added-to-editablelist-not-work-in-my-custom-node/61278/8 "2022-06-16T08:46:23Z")

</div>

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