Alignment of headers in editableList

Developing Nodes
1

Hi folks,

As I said before, CSS will never become my BFF ...

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

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

Here is my (simplified) code:

$("#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

2

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

3

Deactivate the header and no problem :wink:

4

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

5

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 ?

6

Thanks @bakman2!!!

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

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

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

7

This tutorial might help. css grids are really powerful and quick.

1 Like
8

Ok you have already pointed my in the correct direction.

Seems I have copied the display: inline-grid from the Node-RED documentation, 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 :slightly_frowning_face:

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:

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

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

9

You can use:

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

fr is a fraction

10

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