Need CSS label help

General
1

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
Screenshot_2020-12-04-13-47-11_resized360×720 9.53 KB
Screenshot_2020-12-04-13-47-24_resized
Screenshot_2020-12-04-13-47-24_resized360×720 10.2 KB

2

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.

3

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

4

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

image

5

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

6

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

7

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

8

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.

9

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

[{"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

10

The Label most commonly is used for some other element. 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

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

Hmm, the double brackets threw me, :blush: 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

12

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.

13

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

14

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

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.

15

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

Russ

16

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