# Need CSS label help

**URL:** <https://discourse.nodered.org/t/need-css-label-help/37024>\
**Category:** General\
**Created:** [4 December 2020 20:00 UTC](https://discourse.nodered.org/t/need-css-label-help/37024 "2020-12-04T20:00:10Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [4 December 2020 20:00 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/1 "2020-12-04T20:00:10Z")

</div>

Hi All,

I built a CSS label for my UI and can get the numbers to show, but! I need help finding out what element the "value" is called by so I can manipulate it. All the CSS code I've found so far only works with the label and it's text. Changing any of the regular label elements doesn't seem to affect the numbers flowing into the value field. Here are two pix, first is the label with attributes set so I can see it. Second pic shows the values (white) that needs to be changed up. Is the label supposed to "scrunch up" when values are applied to it? Eventually, I'll black out the label and have only the value field showing, but right now I can't change the color, position, font-size, etc. of the white value field...

Thanks!

Russ

 ![Screenshot_2020-12-04-13-47-11_resized](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/56ccbd40c603e702070963eec5cd3cf9b6b33feb.png) ![Screenshot_2020-12-04-13-47-24_resized](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6b9cba69fa887bb3186d01366efe94f7abf4e3c4.png)

---

<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:** [4 December 2020 20:21 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/2 "2020-12-04T20:21:20Z")

</div>

You need to investigate the developer tools on your browser. But you will likely need a desktop browser rather than a mobile one which are much harder to work with.

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [4 December 2020 22:35 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/3 "2020-12-04T22:35:05Z")

</div>

I've loaded the ui on my 'puter, I only see N-R "flex-columns" with nothing apparent inside them. Clicking on the label, for instance, highlights the entire flex-column and gives the properties for it and nothing else.

Russ

---

<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:** [4 December 2020 22:45 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/4 "2020-12-04T22:45:18Z")

</div>

Did you use the select option on the elements tab (that's for Edge/Chrome at least)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72d82cde03ed15b1a16ea7bc372a7451e3b5559b.png)

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [4 December 2020 22:55 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/5 "2020-12-04T22:55:08Z")

</div>

Ahh, thanks! After doing that I get to the label, but it doesn't show me anything I don't already know. The small white numbers (msg.topic) tick off, but don't show as an editable attribute. I may be stuck, or may try a text instead of a label...

Russ

---

<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:** [5 December 2020 00:05 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/6 "2020-12-05T00:05:29Z")

</div>

Perhaps if you share some of the information, someone might be able to give more help?

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [5 December 2020 00:54 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/7 "2020-12-05T00:54:49Z")

</div>

I used a template node to build a simple label using CSS (this works).

I'm using msg.topic to change the value property of the node (this works).

The value property does not respond to any of the typical CSS attributes normally used to style a CSS label.

I'm stuck because I do not know, nor have I found out, the correct "attribute" to address in order to change any of the style elements of said label's "value" on the ui.

Russ

---

<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:** [5 December 2020 09:25 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/8 "2020-12-05T09:25:34Z")

</div>

If you provide the actual flow showing the issue, people could see what you are actually doing instead of trying to guess what you may have done.

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [5 December 2020 20:38 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/9 "2020-12-05T20:38:45Z")

</div>

Well, I really hoped I could get this myself, but it's not to be.

```auto
[{"id":"c592baad.37cc98","type":"inject","z":"c199b9b6.017a2","name":"start","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Not in the box!","x":680,"y":1080,"wires":[["a0afbcad.890128"]]},{"id":"a0afbcad.890128","type":"ui_template","z":"c199b9b6.017a2","group":"36e6edd6.dd93b2","name":"","order":2,"width":"3","height":"1","format":"<div ng-bind-html=\"msg.topic\"></div>\n<label class=\"swLabel\">Info:</label>\n\n<style>\n .swLabel {\n font-size: 20px;\n font-weight: 700;\n width: 50%;\n height: 28px;\n padding: 4px 10px;\n border: 1px solid #666;\n background: #cce6ff;\n color: #1c87c9;\n}\n</style>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":840,"y":1100,"wires":[[]]},{"id":"be443a22.28afb","type":"inject","z":"c199b9b6.017a2","name":"stop","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":680,"y":1130,"wires":[["a0afbcad.890128"]]},{"id":"36e6edd6.dd93b2","type":"ui_group","z":"","name":"Label Spacer","tab":"81831aab.f2f568","order":3,"disp":false,"width":6,"collapse":false},{"id":"81831aab.f2f568","type":"ui_tab","z":"","name":"GTO-500 Gate Opener","icon":"dashboard","disabled":false,"hidden":false}]

```

Should be 3 nodes, 2 injects to push and clear the msg.topic, and the template node with CSS. I really would like to replace the word "Info:" with msg.topic, not have it load above or below...

Russ

```auto

```

---

<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:** [5 December 2020 20:52 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/10 "2020-12-05T20:52:11Z")

</div>

The Label most commonly is used for some other element. [https://www.w3schools.com/tags/tag\_label.asp](https://www.w3schools.com/tags/tag_label.asp)  
Your arrangement uses label just as any element which can take string as content.  
But anyway  
To get the label have your input from `msg.topic`

```auto
<label class="swLabel">{{msg.topic}}</label>

```

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [5 December 2020 21:12 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/11 "2020-12-05T21:12:00Z")

</div>

Hmm, the double brackets threw me, 😊 I'm still learning the syntax of all this. Great, that works - but I still get rogue text above or below the label. Did you get that when you ran it?

Russ

---

<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:** [5 December 2020 21:31 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/12 "2020-12-05T21:31:48Z")

</div>

If you are trying to do something similar as the text widget does (it provides for you label and value as text) then I don't understand why you are not using it.  
But if you try to do something more complex then there is not enough information to go any deeper.

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [5 December 2020 23:31 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/13 "2020-12-05T23:31:27Z")

</div>

Two reasons. I'm trying to learn, and I don't like being limited to one font/size/color/etc. I already have CSS in another template for changing the Node-Red dashboard label text and value that is not suitable for this one.

Thanks for your help!

Russ

---

<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:** [5 December 2020 23:53 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/14 "2020-12-05T23:53:16Z")

</div>

> [@RASelkirk](#):
>
> and I don't like being limited to one font/size/color/etc

I don't think you are limited to that but it of course depends ..  
You can adjust CSS of any dashboard component (and details in it) by card or even in same card. They all reachable individually but it takes to be familiar the exact setup.

But of course - nothing wrong with learning and doing it as you do currently. Being in charge of it is valuable position to achieve also.  
Keep doing that 🙂

> [@RASelkirk](#):
>
> but I still get rogue text above or below the label. Did you get that when you ran it?

I did run it and changed to get the `msg.topic` value into the Label and that was what you asked then. But I couldn't figure out what is the real thing you are trying to do. Cos for me as I stated before, the label usage is done for so to say "no purpose".  
So may be explain being more clear in details or sketch it or ...  
Not much here is the CSS in question but also html and the layout you are trying to achieve.

---

<div class="post-metadata">

**Author:** ![RASelkirk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/raselkirk/32/57425_2.png) [@RASelkirk](https://discourse.nodered.org/u/RASelkirk)\
**Post date:** [6 December 2020 00:09 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/15 "2020-12-06T00:09:25Z")

</div>

The "phantom" was caused by leaving:`<div ng-bind-html="msg.topic"></div>` in the template node. Once removed, it's all good.

Russ

---

<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:** [4 February 2021 00:09 UTC](https://discourse.nodered.org/t/need-css-label-help/37024/16 "2021-02-04T00:09:38Z")

</div>

Closed on 4 February 2021 00:09 UTC

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