# Problem with editableList resize callback

**URL:** https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263
**Category:** Developing Nodes
**Created:** [25 May 2024 14:44 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263 "2024-05-25T14:44:36Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [25 May 2024 14:44 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/1 "2024-05-25T14:44:36Z")

</div>

Should the resize() callback on editableList be called when I click the Add row button, or the x to remove a row? I am only seeing it getting called when I initially open the dialog.

Using 4.0.0 beta 3

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [25 May 2024 14:58 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/2 "2024-05-25T14:58:41Z")

</div>

Hi @Colin,

I use the `editableList` quite a bit.  
This is what I do, and seems to work well.

1. My Target element

```html
    <div>
	  <ol id="filtersets" style="min-height:450px;min-width:400px"> </ol>
    </div>

```

1. Instance Creation ( **oneditprepare** )

```js
$('#filtersets').editableList({
    header: $('<div>').append(
        '<div>Filter Sets - order defines outputs</div>'
    ),
    sortable: true,
    removable: true,
    addButton: 'Add Filter Set',
    addItem: AddItem,
    sortItems: SortItems,
    removeItem: RemoveItem
});

```

1. **oneditresize**

```auto
oneditresize: function (size) {
   $('#filtersets').editableList('height', size.height - 70);
}

```

I increase the height of each item when it has focus.

 ![Screenshot 2024-05-25 at 16.00.35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/258d684940c6f4c5962bc0351596604ab2635d59.png)

I should note : I don't use the BETA

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [25 May 2024 15:06 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/3 "2024-05-25T15:06:52Z")

</div>

Is that for when the dialog is resized? That isn't what I am trying to trap, I want to know when the number of rows in the list changes. The [docs](https://nodered.org/docs/api/ui/editableList/#options-resize) say  
'A function that gets called when the size of the list changes.'  
Which I took to mean that the number of rows has changed. It doesn't appear to get called when I resize the dialog.

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [25 May 2024 15:15 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/4 "2024-05-25T15:15:00Z")

</div>

Ah I see.

I don't 'react' if that is right word during addition (at least I don't do anything with the number of items at that point).

I could be wrong - but **addItem** is the call back used when the number of items are being added to and **removeItem** for when one is removed.

You could (if **resize** isn't the event used for this) count the items inside these events?

```auto
const itemCount = $('#filtersets').editableList('items').length

```

Have never used **resize** myself, so it may be of use for you, but have never used it myself.

I wonder if the `resize` event is when the initial Dom element is sized up / or modified later by user code 🤷‍♂️

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [25 May 2024 15:21 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/5 "2024-05-25T15:21:39Z")

</div>

I am currently doing what I need in addItem and removeItem, but it would save code if I could do it in resize. It would be good to know whether this does work in version 3, in case it is a bug in the beta. I haven't got a non-beta version I can play with at the moment.

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [25 May 2024 15:24 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/6 "2024-05-25T15:24:50Z")

</div>

Does **resizeItem** work for you?

it appears this ~~is~~ should be called when the collection has changed?  
this is followed by **resize**

> A function that gets called against each item in the list when the size of the list changes.

[https://nodered.org/docs/api/ui/editableList/#options-resizeItem](https://nodered.org/docs/api/ui/editableList/#options-resizeItem)

EDIT Let me test **resize**....

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [25 May 2024 15:35 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/7 "2024-05-25T15:35:38Z")

</div>

@Colin

Ok...

It ONLY gets called during init (NOT after an item is added/removed)  
Node RED : 3.1.9

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [25 May 2024 17:01 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/8 "2024-05-25T17:01:14Z")

</div>

Thanks for confirming the problem. I have submitted an [issue](https://github.com/node-red/node-red/issues/4722).

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [26 May 2024 09:23 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/9 "2024-05-26T09:23:51Z")

</div>

As noted in the linked issue, the docs are at least ambiguous, if not misleading. In fact you were correct, it is a change in the physical size of the list _element_ that invokes the callback, not the size (length) of the list itself.

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [26 May 2024 11:13 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/10 "2024-05-26T11:13:56Z")

</div>

Indeed seems to be the case.  
Appears to require the docs in this area to be better explained?

---

<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: [25 July 2024 11:14 UTC](https://discourse.nodered.org/t/problem-with-editablelist-resize-callback/88263/11 "2024-07-25T11:14:08Z")

</div>

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