Node-RED allows for some nodes in the pallette to apply inline styles globally

Core Development
1

Recently it was discovered that some nodes have there custom inline style rules applied externally to the script tag. An example to illustrate this is the Prometheus exporter node. See this link

This obviously impacts other nodes, for example if you create a node that applies the same rule to widen labels (to keep text on single line) then this is overwritten.

I am just wondering if there are any proposed plans to have some kind of screening process in place to high light in the score card that inline style rules if the do exist have been applied correctly.

It seems that a solution on a developer level is to safeguard against this type of issue. Ideally without applying !important to style rules:

<html-script type="text/html" data-template-name="node-name">
  <style>
    #an-identifier .red-ui-editor .form-row label {
	width: 27%;
	max-width: 130px;
   }
  </style>
  <section id="an-identifier">
    <!-- Edit dialog content -->
  </section>
</html>
2

Agree that this is bad practice that should be discouraged.

In my own nodes, I make sure that I wrap things in a custom div with a standard id:

<div id="ti-edit-panel">
    .....
</div>

Any custom CSS is then constrained to that id. Indeed I have a CSS file in resources that is shared across all of my nodes.

Some examples:

#ti-edit-panel .form-tips {
    margin-bottom: 1rem;
    width: 100%;
}

#ti-edit-panel .red-ui-typedInput-container {
    width: calc(100% - 105px) !important;
}

#ti-edit-panel fieldset {
    border-style: groove;
    border-color: var(--red-ui-primary-background);
    border-width: 2px;
    padding-left: .3em;
    min-inline-size: calc(var(--min-editor-panel-width) - 8px);
    /* display: inline-block; */
}
#ti-edit-panel legend {
    width:fit-content;
    padding-left: .2em;
    padding-right: .2em;
    color: inherit;
}
#ti-edit-panel input[type="checkbox"] {
    display: inline-block;
    width: auto; 
    vertical-align: top;
}

#ti-edit-panel .form-row {
    /* width: 100%; */
    /* display: inline-block */
}
#ti-edit-panel .form-row label {
    width: 100px;
}
#ti-edit-panel .form-row input:not(.red-ui-typedInput-input), #ti-edit-panel .form-row select {
    width: calc(100% - 105px);
}
#ti-edit-panel fieldset input, #ti-edit-panel fieldset select {
    width: calc(100% - 117px) !important;
}
#ti-edit-panel input[type="checkbox" i], #ti-edit-panel input[type="radio" i] {
    width:1rem !important;
    height:1rem;
    vertical-align: text-bottom;
}
3

There's another node that I would have liked to use, but can't, because it adds a 'no-wrap' style to all form content. Which breaks the display of any 'tip' content in nodes such as join.

4

@malee and @RvG Make sure to go to the node's GitHub page and open an issue there reporting the problem so the author will get a notice about it. Hopefully they will correct the issue.

It will also inform other users if they search the nodes issues.

2 Likes
5

I have tried adding a CSS file to resources but it does not seem to render. I think it is the location of the resources folder I have wrong:

dist/nodes/<node-name>/resources
6

Yes, it needs to be off the root folder of your node package:

image

1 Like
7

That is true, the nodes I am working with are scoped so had to add the scope to the resources URL. But all good :slight_smile:

8

If you aren't already, it is better to use relative URL's - that way, if you switch to HTTPS or change the URL prefix, it will all still work.

Here is how I do it - this example isn't scoped but of course:

<link type="text/css" rel="stylesheet" href="./resources/node-red-contrib-uibuilder/ti-common.css" media="all">
<script src="./resources/node-red-contrib-uibuilder/ti-common.js"></script>
<script src="./resources/node-red-contrib-uibuilder/uib-element.js"></script>

I should probably do my common css/js as a plugin really. I'll get to that eventually.

9

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