Non-breaking space is not treated in ui_update.label

selwynjackson · 30 September 2024 09:05

I am trying to space fields in a ui-text node. The msg.payload accepts '&nbsp' as a space, but the msg.ui_update.label does not. Is there any other way to get multiple spaces into the label?

joepavitt · 30 September 2024 09:22

Hi @selwynjackson - welcome to the community.

I actually went to answer, _"just include spaces in the msg.payload, e.g. "My Payload", but you're right, that clears the spaces, and from research, is actually just how HTML works.

I thought we parsed that label content as HTML, but it appears we do not. I'll get a bug/issue opened to get that resolved.

Update: Issue Opened: Support HTML in ui_update.label for UI Text node · Issue #1346 · FlowFuse/node-red-dashboard · GitHub

selwynjackson · 30 September 2024 09:26

Thank you, @joepavitt

BartButenaers · 10 October 2024 21:37

Pull request is created and ready for review:

github.com/FlowFuse/node-red-dashboard

Support for html in labels

FlowFuse:main ← bartbutenaers:html-labels

opened 09:11PM - 10 Oct 24 UTC

bartbutenaers

+68 -44

## Description This PR adds support for html in the label for following ui no…de types: + ui-number-input + ui-dropdown + ui-button-group + ui-radio-group + ui-slider + ui-switch + ui-text + ui-text-input The following demo shows how to change from the static labels (from the config screen), to plain text labels and finally to html labels: ![dynamic_labels](https://github.com/user-attachments/assets/f167d22e-2860-4b5a-9837-1de154c372d9) ``` [{"id":"7b2f3c4e68f76fc6","type":"ui-slider","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Slider","label":"Static label","tooltip":"","order":6,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":"true","showTicks":"always","min":0,"max":10,"step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":1950,"y":2120,"wires":[[]]},{"id":"952c3a4bc1aedcb9","type":"ui-switch","z":"4aad778b57d4f47b","name":"Switch","label":"Static label","group":"bd4b3eed126bd60e","order":7,"width":0,"height":0,"passthru":false,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","clickableArea":"switch","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":1950,"y":2160,"wires":[[]]},{"id":"3cab92ecc8c62250","type":"ui-radio-group","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Radio group","label":"Static label","order":5,"width":0,"height":0,"columns":1,"passthru":false,"options":[{"label":"Value 1","value":"value1","type":"str"},{"label":"Value 2","value":"value2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":1970,"y":2080,"wires":[[]]},{"id":"805544beee60b59e","type":"ui-dropdown","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Dropdown (combobox)","label":"Static label","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"Value 1","value":"value1","type":"str"},{"label":"Value 2","value":"value2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"x":2000,"y":2000,"wires":[[]]},{"id":"3957a5ca24d0a8c0","type":"ui-button-group","z":"4aad778b57d4f47b","name":"Button group","group":"bd4b3eed126bd60e","order":2,"width":6,"height":1,"label":"Static label","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"label A","icon":"","value":"option_0","valueType":"str","color":"#009933"},{"label":"label B","icon":"","value":"option_1","valueType":"str","color":"#999999"}],"topic":"topic","topicType":"msg","x":1970,"y":1960,"wires":[[]]},{"id":"d06b475b0dc03d4b","type":"ui-number-input","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Number input","label":"Static label","order":1,"width":0,"height":0,"topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"tooltip":"","passthru":true,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","spinner":"default","x":1980,"y":1920,"wires":[[]]},{"id":"11853f18ec8773ce","type":"ui-text","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","order":8,"width":0,"height":0,"name":"Text","label":"Static label","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":1950,"y":2200,"wires":[]},{"id":"47e417fd8d289a18","type":"ui-text-input","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Text input (single line)","label":"Static label","order":9,"width":0,"height":0,"topic":"topic","topicType":"msg","mode":"text","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":2000,"y":2240,"wires":[[]]},{"id":"ee804a9ead3af9c9","type":"inject","z":"4aad778b57d4f47b","name":"Plain text label","props":[{"p":"ui_update.label","v":"Plain text","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1680,"y":1920,"wires":[["d06b475b0dc03d4b","3957a5ca24d0a8c0","805544beee60b59e","3cab92ecc8c62250","7b2f3c4e68f76fc6","952c3a4bc1aedcb9","11853f18ec8773ce","feef390550d2dc22","ddb30c1fa5b2fa01","47e417fd8d289a18"]]},{"id":"d1e7cda10b8d2729","type":"inject","z":"4aad778b57d4f47b","name":"Html label","props":[{"p":"ui_update.label","v":"<p style=\"color: red; font-weight: bold; text-decoration: underline;\">Html text</p>","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1700,"y":1960,"wires":[["d06b475b0dc03d4b","3957a5ca24d0a8c0","805544beee60b59e","3cab92ecc8c62250","7b2f3c4e68f76fc6","952c3a4bc1aedcb9","11853f18ec8773ce","47e417fd8d289a18","feef390550d2dc22","ddb30c1fa5b2fa01"]]},{"id":"feef390550d2dc22","type":"ui-text-input","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Text input (multi line)","label":"Static label","order":10,"width":0,"height":0,"topic":"topic","topicType":"msg","mode":"textarea","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":2000,"y":2280,"wires":[[]]},{"id":"ddb30c1fa5b2fa01","type":"ui-dropdown","z":"4aad778b57d4f47b","group":"bd4b3eed126bd60e","name":"Dropdown (select)","label":"Static label","tooltip":"","order":4,"width":0,"height":0,"passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"Value 1","value":"value1","type":"str"},{"label":"Value 2","value":"value2","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":false,"x":1990,"y":2040,"wires":[[]]},{"id":"bd4b3eed126bd60e","type":"ui-group","name":"Html labels demo","page":"febf51051870b4b5","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"febf51051870b4b5","type":"ui-page","name":"Experimenten labels","ui":"be29745a6e568f30","path":"/experiment_labels","icon":"home","layout":"grid","theme":"a965ccfef139317a","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-text-input","ui-dropdown"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}] ``` I 'think' this PR covers all ui node types that have a label. ## Related Issue(s) [1346](https://github.com/FlowFuse/node-red-dashboard/issues/1346) ## Checklist - [ ] I have read the [contribution guidelines](https://github.com/FlowFuse/flowfuse/blob/main/CONTRIBUTING.md) - [ ] Suitable unit/system level tests have been added and they pass - [ ] Documentation has been updated - [ ] Upgrade instructions - [ ] Configuration details - [ ] Concepts - [ ] Changes `flowforge.yml`? - [ ] Issue/PR raised on `FlowFuse/helm` to update ConfigMap Template - [ ] Issue/PR raised on `FlowFuse/CloudProject` to update values for Staging/Production ## Labels - [ ] Includes a DB migration? -> add the `area:migration` label

Topic		Replies	Views
Gauge: decimal digits and payload with spaces Dashboard	11	6861	4 January 2021
Text node doesn't show empty spaces (if generated by a function) Dashboard	4	756	9 October 2021
Many problems after update to v2.2.0 General	8	568	22 April 2022
How to insert blank text space in a UI text node? Dashboard	9	1472	27 December 2020
UI Text label visibility Dashboard	6	62	16 October 2024

Non-breaking space is not treated in ui_update.label

Related Topics