# Alignment of headers in editableList

**URL:** <https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071>\
**Category:** Developing Nodes\
**Created:** [27 August 2020 05:45 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071 "2020-08-27T05:45:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [27 August 2020 05:45 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/1 "2020-08-27T05:45:51Z")

</div>

Hi folks,

As I said before, CSS will never become my [BFF](https://en.wikipedia.org/wiki/Best_friends_forever) ...

In a custom node I have an editableList with two columns and headers for that columns.  
But the headers are not properly aligned with the columns below them:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/ea864f2b8c195a90e2fa235a613386413af40e55.png)

Can get it right by playing with the percentages, but - when I resize manually the config screen - the headers won't stay aligned correctly 🥴

Here is my (simplified) code:

```auto
$("#node-input-traces-container").css('height','200px').css('min-height','200px').css('min-width','450px').editableList({
   header: $("<div>").append($.parseHTML(
      "<div style='width:5%; margin-left:5px; display: inline-grid'></div>" +
      "<div style='width:45%; margin-left:5px; display: inline-grid'><b>Trace name</b></div>" +
      "<div style='width:40%; margin-left:5px; display: inline-grid'><b>Trace type</b></div>" +
      "<div style='width:5%; margin-left:5px; display: inline-grid'></div>")),
   addItem: function(container,i,trace) {
      ...
      container.css({
         overflow: 'hidden',
         whiteSpace: 'nowrap'
      });
                    
      // Add a new row to the html table
      var row = $('<div/>', {class:"node-input-trace-div"}).appendTo(container);
                    
      // Column 1 : Add a text field to the new row, that represents the trace name (type string)
      $('<input/>', {class:"node-input-trace-name", type:"text"}).css({"resize":"none","vertical-align":"top","width":"40%","margin-left":"5px","margin-right":"5px"}).appendTo(row);

      // Column 2 : Add a select field to the new row, that represents the trace type (type string).
      var traceTypeField = $('<select/>', {class:"node-input-trace-type", type:"text", size:"7"}).css({"width":"33%","margin-right":"10px"}).appendTo(row);

      ...
   },
   removable: true,
   sortable: true,
   addButton: "add trace"
});

```

Remark: the header section contains 4 div elements (for only two columns) to have open space at the left and right of the header section. Not sure if those need to be fixed (instead of percentage), because I'm not sure whether that will work correctly when the page is being zoomed in/out...

Thanks a lot !!!  
Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 August 2020 18:52 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/2 "2020-08-29T18:52:56Z")

</div>

If anybody has an idea about how I can solve this, don't hesitate to share it here ...

---

<div class="post-metadata">

**Author:** ![Hypnos](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hypnos/32/7566_2.png) [@Hypnos](https://discourse.nodered.org/u/Hypnos)\
**Post date:** [29 August 2020 19:15 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/3 "2020-08-29T19:15:16Z")

</div>

Deactivate the header and no problem 😉

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 August 2020 19:20 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/4 "2020-08-29T19:20:18Z")

</div>

I can also deactivate all my Node-RED developments, then I have also no problem 😉

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [29 August 2020 19:47 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/5 "2020-08-29T19:47:12Z")

</div>

` display: inline-grid` does not work as you think it might work.

Define the container as a grid and set it the grid there (as a template), the elements inside will be treated as grid elements. Is a table not easier ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 August 2020 19:55 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/6 "2020-08-29T19:55:09Z")

</div>

Thanks @bakman2!!!

> [@bakman2](#):
>
> Is a table not easier ?

Perhaps yes. But I like to stick to the editableList to have a consistent Node-RED look and feel across my nodes.

> [@bakman2](#):
>
> `display: inline-grid` does not work as you think it might work.

To be honest: the `display: inline-grid` is some copy-past programming from some other node. If you think it is easier without that, I have no problems to remove it...

> [@bakman2](#):
>
> Define the container as a grid and set it the grid there (as a template)

Can you please explain that a bit more, because that is way out of my comfort zone ...

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [29 August 2020 20:07 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/7 "2020-08-29T20:07:33Z")

</div>

This [tutorial might help](https://www.youtube.com/watch?v=jV8B24rSN5o). css grids are really powerful and quick.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 August 2020 21:35 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/8 "2020-08-29T21:35:16Z")

</div>

> [@bakman2](#):
>
> css grids are really powerful and quick.

Ok you have already pointed my in the correct direction.

Seems I have copied the `display: inline-grid` from the Node-RED [documentation](https://nodered.org/docs/api/ui/editableList/#options-header), but that page doesn't refer anywhere else to the term `grid` ...  
Which means my editableList most probably needs to have extra grid related style attributes like you suggest 🙁

The youtube tutorial uses quite some extra CSS stuff that is new to me, so will need to digest that slowly in the next week ... I assume I need to add this to 'some' div element of the editableList:

```auto
display:grid;
grid-template-columns: 10% 40% 40% 10%

```

But not sure if those 10% values make any sense, because the width of those divs need to match the width of the icons:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c46e15bb8190831b86e13c06226f6012ce38bed.png)

But those icons are put there by the EditableList widget, which means I need to have my div's somehow the same width as those icons...

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [30 August 2020 05:58 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/9 "2020-08-30T05:58:21Z")

</div>

> [@BartButenaers](#):
>
> ```auto
> display:grid;
> grid-template-columns: 10% 40% 40% 10%
> 
> ```

You can use:

```auto
display:grid;
grid-template-columns: 12px 1fr 1fr 12px

```

`fr` is a fraction

---

<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:** [29 October 2020 05:58 UTC](https://discourse.nodered.org/t/alignment-of-headers-in-editablelist/32071/10 "2020-10-29T05:58:24Z")

</div>

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