# UI CSS font size template node problem

**URL:** <https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [17 March 2022 11:33 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984 "2022-03-17T11:33:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [17 March 2022 11:33 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/1 "2022-03-17T11:33:54Z")

</div>

Dear forum,

I can adjust the text node font size with a template node to display bigger numbers.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d65338b44acb9acab435ee2099d8661f7a7eda3.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e97da6229fd984d263374468a25c8f6175d6a9bc.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c735c105af648b52020a6927f82d4e183173572f.png)

Same for the text node that displays words  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8bf6cd1ed3bc7b18462d38709a587ace27ccf120.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a5f3232144e16e35969eaa54ecbc46313141d52.png)

But I can't get the "100" get in a bigger font

So far I've used p.label and .value  
How can I reference to the text input to adjust its size **without using CSS class**

Just the same style as I used in the examples.

Could anyone help me what I have to put in place instead of .value or p.label?

---

<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:** [17 March 2022 12:20 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/2 "2022-03-17T12:20:54Z")

</div>

Try with this

```auto
<style>
    nr-dashboard-theme .nr-dashboard-textinput input {
        font-size: 2em;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [17 March 2022 16:15 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/3 "2022-03-17T16:15:57Z")

</div>

Thank you for your reply, how can i assign this to node ID?

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [17 March 2022 16:20 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/4 "2022-03-17T16:20:14Z")

</div>

Didn't work ☹

---

<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:** [18 March 2022 06:51 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/5 "2022-03-18T06:51:15Z")

</div>

Show that part of flow, how you try to use it.

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [18 March 2022 09:05 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/6 "2022-03-18T09:05:32Z")

</div>

```auto
[{"id":"b6452a0321436842","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"Text Font Format","order":11,"width":7,"height":1,"format":"<style>\n\n\n[node-id=\"cef7244c73caf7b0\"] .value \n\n{\n font-size: 30px;\n }\n \n \n \n [node-id=\"cef7244c73caf7b0\"] p.label\n \n{\nfont-size: 25px;\n }\n \n \n \n \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":210,"y":1340,"wires":[[]]},{"id":"92e43fb0bca4b1c5","type":"ui_slider","z":"1f851c1.28701e4","name":"","label":"slider","tooltip":"","group":"34c8e5f1.3881fa","order":6,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"className":"","x":410,"y":1500,"wires":[[]]},{"id":"bceab34cbcb678ee","type":"ui_numeric","z":"1f851c1.28701e4","name":"","label":"numeric","tooltip":"","group":"34c8e5f1.3881fa","order":7,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"className":"","x":420,"y":1540,"wires":[[]]},{"id":"e26a0f0a672e780c","type":"ui_text_input","z":"1f851c1.28701e4","name":"","label":"","tooltip":"","group":"34c8e5f1.3881fa","order":5,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":400,"y":1460,"wires":[[]]},{"id":"cef7244c73caf7b0","type":"ui_text","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","order":4,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":370,"y":1420,"wires":[]},{"id":"11e8c3d71abf6192","type":"inject","z":"1f851c1.28701e4","name":"bigger font","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"test","payloadType":"str","x":210,"y":1440,"wires":[["cef7244c73caf7b0","e26a0f0a672e780c"]]},{"id":"51cbb1bb8b58e51b","type":"inject","z":"1f851c1.28701e4","name":"bigger font","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"123","payloadType":"num","x":230,"y":1500,"wires":[["92e43fb0bca4b1c5","bceab34cbcb678ee"]]},{"id":"0686d2bd47df4205","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"Text Font Size text input","order":36,"width":9,"height":1,"format":"<style>\n nr-dashboard-theme .nr-dashboard-textinput input {\n font-size: 30px;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":230,"y":1280,"wires":[[]]},{"id":"34c8e5f1.3881fa","type":"ui_group","name":"test","tab":"43b06d842d4a7b64","order":1,"disp":true,"width":"15","collapse":false,"className":""},{"id":"43b06d842d4a7b64","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [18 March 2022 09:12 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/7 "2022-03-18T09:12:36Z")

</div>

Oh , my copy/paste issue .  
The first dot were missing.

```auto
<style>
    .nr-dashboard-theme .nr-dashboard-textinput input {
        font-size: 2em;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [18 March 2022 09:15 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/8 "2022-03-18T09:15:49Z")

</div>

hmmmm...This also did nothing!  
How can i assign this to node ID (not all text input nodes needs to be bigger 😃 )

---

<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:** [18 March 2022 09:27 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/9 "2022-03-18T09:27:38Z")

</div>

Then maybe this will be simplest

```auto
[node-id="e26a0f0a672e780c"] * input {
    font-size: 2em;
}

```

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [18 March 2022 10:05 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/10 "2022-03-18T10:05:16Z")

</div>

It works!

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f1db05b8ef137b0fb474b7ec80e1f273b2c5912.png)

Is there a way to stop the non-capital letter "y" (next to the capital letter Y) to look like a letter v? 🤣

---

<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:** [18 March 2022 11:22 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/11 "2022-03-18T11:22:31Z")

</div>

Probably can be done some other ways too but what I found is

```auto
[node-id="e26a0f0a672e780c"] * input {
    font-size: 2em;
    height:unset;
}

```

It may produce some other side effects ....

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [18 March 2022 13:52 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/12 "2022-03-18T13:52:05Z")

</div>

It worked!

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf695f1dda46a34cf25f0d2e869deab8c6bc6039.png)  
any idea how this value part is reached?

The label part was accessed with [node-id=" "] p.label,  
But the value part stayed the same ☹

---

<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:** [18 March 2022 14:04 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/13 "2022-03-18T14:04:21Z")

</div>

add a `class` to the node called `size_25` and then this selector/rule to the `ui-template`

```auto
.size_25 div p {
    font-size: 2em;
}

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 March 2022 14:44 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/14 "2022-03-18T14:44:26Z")

</div>

Or you can style the label and value seperately:

```auto
    .nr-dashboard-text.size_25 p.label{
        font-size: 0.8em;
        font-family: "courier new", sans-serif;
        color: #ff8c00;
    }
    .nr-dashboard-text.size_25 p.value{
        font-size: 1.8em;
        font-family: "Times New Roman", serif;
        color: #00008B
    }

```

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [19 March 2022 08:49 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/15 "2022-03-19T08:49:47Z")

</div>

@zenofmud @hotNipi @jbudd

Thank you all so much! I learned something new about CSS classes and I was able to implement it. My project is making huge progress thanks!

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [19 March 2022 17:37 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/16 "2022-03-19T17:37:16Z")

</div>

One more question @hotNipi @jbudd @zenofmud

How does one resize data (words and numbers) in UI table?

Rows are added dynamicly and I would like to have the entire table including added rows 30px

I am stuck after trying some ideas like .tabulator textSize and other inputs in the CSS node… some examples on the forum are also not what i needed (somehow some didn’t work too)

I would be forever grateful!

---

<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:** [20 March 2022 02:24 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/17 "2022-03-20T02:24:21Z")

</div>

> [@WBr](#):
>
> entire table including added rows 30px

This is kind of confusing explanation but font size and row height can be somehow adjusted like this

```auto
.tabulator-row {
    min-height: 26px;
    font-size:24px;
}

```

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [20 March 2022 09:54 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/18 "2022-03-20T09:54:48Z")

</div>

Thank you! Will try asap!

What i meant was that all the input in the table needs to be 30px 😄

---

<div class="post-metadata">

**Author:** ![WBr](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@WBr](https://discourse.nodered.org/u/WBr)\
**Post date:** [20 March 2022 10:24 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/19 "2022-03-20T10:24:14Z")

</div>

This worked!

Is the rule font size \< min-height?  
If so, that would make a lot of sense

---

<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:** [19 May 2022 10:25 UTC](https://discourse.nodered.org/t/ui-css-font-size-template-node-problem/59984/20 "2022-05-19T10:25:00Z")

</div>

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