Dashboard 2 button explanation

Dashboard
1

Trying to get Dashboard 2 running and hit something I don't understand. As shown in pix 1
2
The button in the group shows just fine. I don't connect anything to it and when I put MyCSS text on the same page I get this

.jpg
.jpg1092×285 21.8 KB

I don't understand why when I do nothing to the node it suddenly freaks out, it turns black and unreadable. It must read the CSS file even though I haven't explicitly told it to? And why does just the one button go crazy when the other two don't?

[{"id":"3c1b57419d9262a3","type":"tab","label":"One","disabled":false,"info":"","env":[]},{"id":"83026e3dc5ce74b4","type":"ui-template","z":"3c1b57419d9262a3","d":true,"group":"","page":"8a2d01e5b99964cf","ui":"","name":"MyCss","order":0,"width":0,"height":0,"head":"","format":"\n.Text label {\n    border: 2px solid black;\n    color: white;\n    border-radius: 8px;\n    background-color: #222222;\n    box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n    background: rgb(5, 5, 5);\n    background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n    margin: 3px;\n    padding-bottom: 4px;\n    border-bottom: 2px solid #DD7F00;\n}\n\n.Text span {\n    border: 2px solid black;\n    color: white;\n    border-radius: 8px;\n    background-color: #222222;\n    box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n    background: rgb(5, 5, 5);\n    background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n    margin: 3px;\n}\n\n.Text1 span {\n    color: white;\n    font-size: 12px;\n    box-sizing: border-box;\n    font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n    border: 2px solid black;\n    border-radius: 8px;\n    background-color: #222222;\n    box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n    background: rgb(5, 5, 5);\n    background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n    margin: 3px;\n}\n\n.Text1 label{\n    color: white;\n    font-size: 16px;\n    box-sizing: border-box;\n    font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n    border: 2px solid black;\n    border-radius: 8px;\n    background-color: #222222;\n    box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n    background: rgb(5, 5, 5);\n    background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n    margin: 3px;\n}\n\n.Text2 label {\n    /*    background-color:red; */\n    height: 25px;\n    margin-bottom: 1px;\n    font-size: 16px;\n    color: white;\n    padding-bottom: 4px;\n    border-bottom: 2px solid #DD7F00;\n\n    box-sizing: border-box;\n        font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n        border: 2px solid black;\n        border-radius: 8px;\n        background-color: #222222;\n        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n        background: rgb(5, 5, 5);\n        background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n        margin: 3px;\n\n}\n\n.Text2 span {\n    /*    background-color:red; */\n    height: 100%;\n    margin-top: 1px;\n    font-size: 20px;\n    color: white;\n\n    box-sizing: border-box;\n        font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n        border: 2px solid black;\n        border-radius: 8px;\n        background-color: #222222;\n        box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n        background: rgb(5, 5, 5);\n        background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n        margin: 3px;\n\n\n}\n\n\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":450,"y":240,"wires":[[]]},{"id":"032135d7f98f514a","type":"ui-text","z":"3c1b57419d9262a3","group":"16ca7d9af2135ff9","order":0,"width":"1","height":"1","name":"TempSet","label":"Temp Set","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":340,"y":120,"wires":[]},{"id":"57c807df7988ae25","type":"ui-text","z":"3c1b57419d9262a3","group":"16ca7d9af2135ff9","order":0,"width":"1","height":"1","name":"Temp Amb","label":"Temp Amb","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":410,"y":80,"wires":[]},{"id":"074186cfb589e1c6","type":"ui-button","z":"3c1b57419d9262a3","group":"6ec5124060a098dd","name":"Up","label":"Up","order":2,"width":"1","height":"1","passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"Up","payloadType":"str","topic":"Up","topicType":"msg","x":450,"y":200,"wires":[[]]},{"id":"de6c0a488411c8c1","type":"ui-button","z":"3c1b57419d9262a3","group":"6ec5124060a098dd","name":"Dn","label":"Dn","order":1,"width":"1","height":"1","passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"Dn","payloadType":"str","topic":"Dn","topicType":"msg","x":290,"y":200,"wires":[[]]},{"id":"f9b97c6688f9b26f","type":"ui-button","z":"3c1b57419d9262a3","group":"6ec5124060a098dd","name":"Flame","label":"Flame","order":3,"width":"1","height":"1","passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"Flame","payloadType":"str","topic":"Flame","topicType":"msg","x":610,"y":200,"wires":[[]]},{"id":"8dac2afef4eeba2a","type":"ui-button","z":"3c1b57419d9262a3","group":"16ca7d9af2135ff9","name":"Power","label":"Power","order":0,"width":"1","height":"1","passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"Power","payloadType":"str","topic":"Power","topicType":"msg","x":470,"y":40,"wires":[[]]},{"id":"d3f8f5c2ea518e2a","type":"inject","z":"3c1b57419d9262a3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"class","v":"Text","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"22.5","payloadType":"str","x":190,"y":40,"wires":[["57c807df7988ae25","032135d7f98f514a"]]},{"id":"8a2d01e5b99964cf","type":"ui-page","name":"Page1","ui":"95707ac6476e0696","path":"/page1","icon":"home","layout":"grid","theme":"428c6e6c8506e7e4","order":1,"className":"","visible":"true","disabled":"false"},{"id":"16ca7d9af2135ff9","type":"ui-group","name":"Grp1","page":"8a2d01e5b99964cf","width":"3","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"6ec5124060a098dd","type":"ui-group","name":"Grp 2","page":"8a2d01e5b99964cf","width":"3","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"95707ac6476e0696","type":"ui-base","name":"Thermo","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"428c6e6c8506e7e4","type":"ui-theme","name":"MyTheme","colors":{"surface":"#c0c0c0","primary":"#0094ce","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2

You will likely need to use your browser's dev tools to look at the html and css to see what is driving the visuals of that button.

On the Elements tab, look at the "styles" window:

image

It tells you what is controlling the visuals and where that comes from. You can also turn on/off individual style settings and add new ones if need for experimentation.

3

In your CSS you have pretty "loose" selectors defined.


.Text label {
    border: 2px solid black;
    color: white;
....
}

.Text span {
    border: 2px solid black;
    color: white;
....
}

If you now (even by accident) send msg.class = Text to whatever widget which does have span element or label element, they will be affected with this. Note that span and label are pretty common building blocks in HTML so they are used widely.
Also as the last known good msg will be replied to all elements (under cover) when dashboard connects (refresh and stuff), the class will be reapplied even if you disconnected the wires. It lasts until you send new msg where msg.class is empty. Of course you can clear the browser cache and restart node-red and do such tricks also.

What you should do is to target the CSS selectors more precise. Also if you just wanted to decorate some elements which don't change (in terms of how they look) in runtime, add the class name directly to the node's configuration rather than sending it via msg.

4

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