Drop Down Node Adjust Font Size

Dashboard
1

I am looking for guidance on how I would adjust the font size on my UI Dropdown Node selector text field. I was able to adjust the Label text size but, I want to adjust the selector text font size to match. In the below example as example "3:1" I would want to be font size 6.

image
image1266×504 12.7 KB 

[{"id":"3eca091f.9e0596","type":"ui_dropdown","z":"39e30936.0abe66","name":"SCOPE","label":"<font size=6>Scope</font>","tooltip":"","place":"","group":"c367d93b.84dc88","order":17,"width":9,"height":1,"passthru":false,"multiple":false,"options":[{"label":"3:1","value":"3","type":"str"},{"label":"5:1","value":"5","type":"str"},{"label":"7:1","value":"7","type":"str"}],"payload":"","topic":"topic","topicType":"msg","x":100,"y":420,"wires":[["5e87daeb.67e934"]]},{"id":"c367d93b.84dc88","type":"ui_group","name":"Controls","tab":"9c2374fc.63ae28","order":1,"disp":true,"width":14,"collapse":false},{"id":"9c2374fc.63ae28","type":"ui_tab","name":"Anchoring Dashboard","icon":"dashboard","disabled":false,"hidden":false}]
2

I'm not sure how to get font size=6 but you can increase the size with CSS in a template node.
This example uses font-size: x-large but you could use 24px, 150% etc.

[
    {
        "id": "03962094d7f70c1d",
        "type": "ui_template",
        "z": "cf3317c32e6245e6",
        "group": "c367d93b.84dc88",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .md-select-value .md-text {\n        font-size:x-large;\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 250,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "c367d93b.84dc88",
        "type": "ui_group",
        "name": "Controls",
        "tab": "9c2374fc.63ae28",
        "order": 1,
        "disp": true,
        "width": 14,
        "collapse": false
    },
    {
        "id": "9c2374fc.63ae28",
        "type": "ui_tab",
        "name": "Anchoring Dashboard",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
3

@scurvydog
FYI: <font> is not supported in html5
https://www.w3schools.com/tags/tag_font.asp

4

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