# CSS to enlarge text size of single ui-text node value

**URL:** <https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709>\
**Category:** Dashboard\
**Created:** [7 September 2021 11:51 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709 "2021-09-07T11:51:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [7 September 2021 11:51 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/1 "2021-09-07T11:51:38Z")

</div>

Hi All,  
Hopefully an easy one - I have searched the forum but can't seem to figure out what I am doing wrong.

I simply want to enlarge the text size of a **single** ui-text node value field.

I can successfully enlarge the text size on all ui-text node value fields using:

```auto
.nr-dashboard-theme .nr-dashboard-text .value {
    font-size: 1.5em;
 }

```

but when I try to specify any single node, it doesn't seem to work, I have tried the following (with and without the `!important`), checked the node-id several times and tried it on multiple nodes:

```auto
[node-id="415c4c9bd2b631ed"] > .nr-dashboard-theme .nr-dashboard-text .value {
    font-size: 1.5em !important;
 }

```

Any ideas how I can get this to work?

Thanks in advance, Mark.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [7 September 2021 15:39 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/2 "2021-09-07T15:39:58Z")

</div>

> [@MarkC](#):
>
> ```auto
> [node-id="415c4c9bd2b631ed"] > .nr-dashboard-theme .nr-dashboard-text .value {
> font-size: 1.5em !important;
> }
> 
> ```

```auto
[node-id="415c4c9bd2b631ed"] .value {
    font-size: 1.5em;
 }

```

And you don't even need the !important flag.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [7 September 2021 20:03 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/3 "2021-09-07T20:03:28Z")

</div>

You can also change the font size in the value field:

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/24dd5e89f2c7627d43c93e0afc3061ad59b248b9.png)

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 02:23 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/4 "2021-09-08T02:23:35Z")

</div>

ok, so i tried  
`[node-id="415c4c9bd2b631ed"] .value { font-size: 1.5em; }`  
with of course the ID of the text i need to change:

already had the `<font size = 16>{{msg.payload}}`

which yes, changed the font to a bigger size..... but i cannot go bigger, and i need one set of number bigger, like almost 1 inch tall on a 7in screen held horizontal....

any ideas?

edit, seems 1-8? is the range of sizes....px and em seem to do nothing

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 02:42 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/5 "2021-09-08T02:42:22Z")

</div>

Thank you so much for taking the time to respond @hotNipi - this works perfectly!  
Also super nice work with the new gauge you are creating - I am using a number of your nodes in my UI 😀

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 02:46 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/6 "2021-09-08T02:46:03Z")

</div>

I can confirm that the CSS works fine for me, even above 8em.

I tried the following, with `1.5em`, `8em` and `10em` - each changed the text size accordingly

```auto
[node-id="415c4c9bd2b631ed"] .value {
    font-size: 1.5em;
 }

```

Are maybe doubling up with your `<font size = 16>`? You need to use one of the other.

EDIT: I also just tried the solution from @edje11 (in isolation) - this also works fine, but I did see the same limitation that the size/scale seems to be unique and unrelated to any units, also that the effective size is limited to `8`, a bigger number results in the same size as `8`.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7471ccb8f7630dea2fb309a9ad50f02ed979c891.png)

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 03:09 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/7 "2021-09-08T03:09:34Z")

</div>

@edje11 thank you very much for sharing the alternative solution - this option also works well and avoids the need for any CSS.  
The only limitations are as mentioned by @Crossfire, but for the typical use case I don't think that is a problem.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7471ccb8f7630dea2fb309a9ad50f02ed979c891.png)

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 03:38 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/8 "2021-09-08T03:38:10Z")

</div>

ok if the part with node id works, then i may just be putting it in the wrong way.

currently putting it into the ui\_text node that i want changed. putting it exactly as it is written.

(and no, i removed font size when i started changing the css and vise versa)

so if i have inject -\> text box.....do i put the css in that text box?  
or  
inject -\> ? -\>text box  
does something go in place of the ?

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 04:03 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/9 "2021-09-08T04:03:29Z")

</div>

To use the CSS option you need to add a **Template** node somewhere in the editor and then enter:

```auto
<style>
[node-id="415c4c9bd2b631ed"] .value {
    font-size: 2.5em;
 }
</style>

```

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 04:40 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/10 "2021-09-08T04:40:36Z")

</div>

so i have this  
'  
[  
{  
"id": "37f24e211d4e78d4",  
"type": "template",  
"z": "a66128a01ec6bbcc",  
"name": "",  
"field": "payload",  
"fieldType": "msg",  
"format": "handlebars",  
"syntax": "mustache",  
"template": "\n[node-id="1197dd081a523ebc"].value {\n font-size: 10.0em;\n }\n\n",  
"output": "str",  
"x": 920,  
"y": 140,  
"wires": [  
[  
"1197dd081a523ebc",  
"c94efadeb76262c4"  
]  
]  
}  
]  
'

data into it, text box out of it....but now it isnt showing anything in the text box.

i am missing something, and have no clue what it is...

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 05:04 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/11 "2021-09-08T05:04:34Z")

</div>

Sorry I don't really understand what you are trying to do. I also can't seem to import what you pasted in.

Just to confirm, are you using a 'template' node?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0786cc5ac953ff52767f1146caf71fc720680a2.png)

Then have you set template type to 'added to site section' and pasted the CSS in per below?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c47b934e0985089d3f6caf4f692b93aacba0c788.png)

There is no need to connect the 'template' node to anything, it just needs to be added somewhere to the Node-RED editor.

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 05:06 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/12 "2021-09-08T05:06:20Z")

</div>

no, was using the dashboard text box: to put the text on the dashboard

then using built in template, per what you all were saying

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 05:08 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/13 "2021-09-08T05:08:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 05:17 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/14 "2021-09-08T05:17:26Z")

</div>

ok did it with the blue node, and still no change?

see, i am completely lost to this:

update:  
using the node ID with added = nothing  
using "widget in group" worked?

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 05:23 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/15 "2021-09-08T05:23:12Z")

</div>

> [@MarkC](#):
>
> There is no need to connect the 'template' node to anything, it just needs to be added somewhere to the Node-RED editor.

Do not connect the template node to anything - it just needs to be there, I have stated this a few times.

Also show an image of what you entered into the template node (obviously use the ID from YOUR text node).

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 05:25 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/16 "2021-09-08T05:25:53Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c58fbc5a1c8788f72b3f054935603ca780415c6.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df5e3abf5adfeb5cc8182ca9094d5f6483635a35.png)

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [8 September 2021 06:31 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/17 "2021-09-08T06:31:24Z")

</div>

You still have the 'template node' connected to the inject node... again just try **without** it connected to anything - it should work.

Also make sure there is nothing extra/fancy in the ui-text node, in case that is interfering - just let it accept `{{msg.payload}}` in the value field.

---

<div class="post-metadata">

**Author:** ![Crossfire](https://avatars.discourse-cdn.com/v4/letter/c/a8b319/32.png) [@Crossfire](https://discourse.nodered.org/u/Crossfire)\
**Post date:** [8 September 2021 17:12 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/18 "2021-09-08T17:12:23Z")

</div>

yes, templates work alone (and a side effect, in dashboard layout, gives me the ability to use them as placeholders to help keep things where i want!)

thank you for pointing out the "wrong template" i was using. and the style sheet!

---

<div class="post-metadata">

**Author:** ![xpqrs97](https://avatars.discourse-cdn.com/v4/letter/x/f4b2a3/32.png) [@xpqrs97](https://discourse.nodered.org/u/xpqrs97)\
**Post date:** [9 September 2021 00:52 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/19 "2021-09-09T00:52:36Z")

</div>

is this method works on ui\_table?

---

<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:** [23 September 2021 00:53 UTC](https://discourse.nodered.org/t/css-to-enlarge-text-size-of-single-ui-text-node-value/50709/20 "2021-09-23T00:53:16Z")

</div>

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