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

**URL:** https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377
**Category:** Core Development
**Created:** [30 May 2024 11:23 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377 "2024-05-30T11:23:30Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![malee](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@malee](https://discourse.nodered.org/u/malee)
#### Post date: [30 May 2024 11:23 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/1 "2024-05-30T11:23:30Z")

</div>

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](https://github.com/Docoyo/node-red-contrib-prometheus-exporter/pull/28/commits/a798246b66f8ae4b10c0955fb50b383a83a778a3)

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](https://flows.nodered.org/node/@objectif-lune/node-red-contrib-files-and-folders/scorecard) 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:

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

```

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2024 12:01 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/2 "2024-05-30T12:01:20Z")

</div>

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

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

```auto
#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;
}

```

---

<div class="post-metadata">

### Author: ![RvG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rvg/32/96613_2.png) [@RvG](https://discourse.nodered.org/u/RvG)
#### Post date: [30 May 2024 12:30 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/3 "2024-05-30T12:30:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [30 May 2024 12:46 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/4 "2024-05-30T12:46:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![malee](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@malee](https://discourse.nodered.org/u/malee)
#### Post date: [30 May 2024 13:46 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/5 "2024-05-30T13:46:24Z")

</div>

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:

```auto
dist/nodes/<node-name>/resources

```

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2024 18:39 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/6 "2024-05-30T18:39:55Z")

</div>

> [@malee](#):
>
> I think it is the location of the resources folder I have wrong:

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

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

---

<div class="post-metadata">

### Author: ![malee](https://avatars.discourse-cdn.com/v4/letter/m/ac8455/32.png) [@malee](https://discourse.nodered.org/u/malee)
#### Post date: [31 May 2024 09:24 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/7 "2024-05-31T09:24:10Z")

</div>

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

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [31 May 2024 09:52 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/8 "2024-05-31T09:52:00Z")

</div>

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:

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

---

<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 August 2024 09:52 UTC](https://discourse.nodered.org/t/node-red-allows-for-some-nodes-in-the-pallette-to-apply-inline-styles-globally/88377/9 "2024-08-29T09:52:22Z")

</div>

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