node-red-node-ui-list icons appear not vertically centered

[My-Random-Thoughts]

Which node are you reporting an issue on?

node-red-node-ui-list

What are the steps to reproduce?

Create node, add one or more items in MultiLine mode (narrow or wide) Include title, description and icon_name properties

What happens?

The icon appears off centrer vertically

What do you expect to happen?

It should align perfectly

Please tell us about your environment:

• [ ] Node-RED version: 1.3.5 (docker image: nodered/node-red:latest-12)
• [ ] node.js version: 12.22.1
• [ ] npm version: ??
• [ ] Platform/OS: Docker running on Ubuntu 20.10 server
• [ ] Browser: Chromium 91 on Ubuntu 20.10 desktop

I have added two screen shots, one with the default Node-RED theme, the second with the Angular theme. Using your own sample code, the resulting images look different to your sample image (The right hand list are using the icon_name format)

Notice the height of the "wifi" icons.

(your sample image: https://raw.githubusercontent.com/node-red/node-red-ui-nodes/master/node-red-node-ui-list/figs/sample00.png)

[My-Random-Thoughts]

Thanks for the quick fix, but it's gone the other way now :)

This is the Node-RED Theme, the Narrow format (top) looks great, the wide format, not so much.

This is the Angular theme, both are too low:

[My-Random-Thoughts]

Can we get this one reopened please?

[dceejay]

OK - better fix pushed to master of dashboard

[My-Random-Thoughts]

Sorry, still broken: I added more options too (checkbox, menu, etc)

[My-Random-Thoughts]

To save you a little time:

[{"id":"68837691.859d78","type":"inject","z":"da204325.2b65f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"title\":\"No WiFi Signal\",\"description\":\"Lost network connection\",\"icon_name\":\"signal_wifi_0_bar\"},{\"title\":\"Weak WiFi Signal\",\"description\":\"May lose network connection\",\"icon_name\":\"signal_wifi_2_bar\"},{\"title\":\"Strong WiFi Signal\",\"description\":\"Connected to network\",\"icon_name\":\"signal_wifi_4_bar\"}]","payloadType":"json","x":290,"y":420,"wires":[["9db7e747.9fd9a8","1ca87ba6.e42ad4","7fd0269d.ce5288","f49f381a.c69458","ec1e5e6a.d12e","15dc835e.5a5a4d","9b55da3.895db28","11a035c6.8a78fa","c95c8da1.d860b","2dbdb1ba.41da6e","87d8b1a1.9baf","76d2b494.5114cc"]]},{"id":"9db7e747.9fd9a8","type":"ui_list","z":"da204325.2b65f","group":"7e4c65d6.0419cc","name":"Narrow","order":2,"width":6,"height":3,"lineType":"two","actionType":"none","allowHTML":true,"outputs":0,"topic":"","x":440,"y":340,"wires":[]},{"id":"1ca87ba6.e42ad4","type":"ui_list","z":"da204325.2b65f","group":"7e4c65d6.0419cc","name":"Wide","order":3,"width":6,"height":"5","lineType":"three","actionType":"none","allowHTML":true,"outputs":0,"topic":"","x":430,"y":380,"wires":[]},{"id":"7fd0269d.ce5288","type":"ui_list","z":"da204325.2b65f","group":"7e4c65d6.0419cc","name":"Single","order":1,"width":6,"height":3,"lineType":"one","actionType":"none","allowHTML":true,"outputs":0,"topic":"","x":430,"y":300,"wires":[]},{"id":"ec1e5e6a.d12e","type":"ui_list","z":"da204325.2b65f","group":"faa49f17.4d7b","name":"Narrow","order":2,"width":6,"height":3,"lineType":"two","actionType":"menu","allowHTML":true,"outputs":1,"topic":"","x":600,"y":340,"wires":[[]]},{"id":"15dc835e.5a5a4d","type":"ui_list","z":"da204325.2b65f","group":"faa49f17.4d7b","name":"Wide","order":3,"width":6,"height":"5","lineType":"three","actionType":"menu","allowHTML":true,"outputs":1,"topic":"","x":590,"y":380,"wires":[[]]},{"id":"f49f381a.c69458","type":"ui_list","z":"da204325.2b65f","group":"faa49f17.4d7b","name":"Single","order":1,"width":6,"height":3,"lineType":"one","actionType":"menu","allowHTML":true,"outputs":1,"topic":"","x":590,"y":300,"wires":[[]]},{"id":"11a035c6.8a78fa","type":"ui_list","z":"da204325.2b65f","group":"4daa8405.f44dbc","name":"Narrow","order":2,"width":6,"height":3,"lineType":"two","actionType":"check","allowHTML":true,"outputs":1,"topic":"","x":440,"y":500,"wires":[[]]},{"id":"c95c8da1.d860b","type":"ui_list","z":"da204325.2b65f","group":"4daa8405.f44dbc","name":"Wide","order":3,"width":6,"height":"5","lineType":"three","actionType":"check","allowHTML":true,"outputs":1,"topic":"","x":430,"y":540,"wires":[[]]},{"id":"9b55da3.895db28","type":"ui_list","z":"da204325.2b65f","group":"4daa8405.f44dbc","name":"Single","order":1,"width":6,"height":3,"lineType":"one","actionType":"check","allowHTML":true,"outputs":1,"topic":"","x":430,"y":460,"wires":[[]]},{"id":"87d8b1a1.9baf","type":"ui_list","z":"da204325.2b65f","group":"f8196568.ad3a18","name":"Narrow","order":2,"width":6,"height":3,"lineType":"two","actionType":"switch","allowHTML":true,"outputs":1,"topic":"","x":600,"y":500,"wires":[[]]},{"id":"76d2b494.5114cc","type":"ui_list","z":"da204325.2b65f","group":"f8196568.ad3a18","name":"Wide","order":3,"width":6,"height":"5","lineType":"three","actionType":"switch","allowHTML":true,"outputs":1,"topic":"","x":590,"y":540,"wires":[[]]},{"id":"2dbdb1ba.41da6e","type":"ui_list","z":"da204325.2b65f","group":"f8196568.ad3a18","name":"Single","order":1,"width":6,"height":3,"lineType":"one","actionType":"switch","allowHTML":true,"outputs":1,"topic":"","x":590,"y":460,"wires":[[]]},{"id":"7e4c65d6.0419cc","type":"ui_group","name":"ListViews-Default","tab":"2f52ec48.3a82cc","order":1,"disp":true,"width":"6","collapse":false},{"id":"faa49f17.4d7b","type":"ui_group","name":"ListViews-Menu","tab":"2f52ec48.3a82cc","order":2,"disp":true,"width":"6","collapse":false},{"id":"4daa8405.f44dbc","type":"ui_group","name":"ListView-CheckBox","tab":"2f52ec48.3a82cc","order":3,"disp":true,"width":"6","collapse":false},{"id":"f8196568.ad3a18","type":"ui_group","name":"ListView-Switch","tab":"2f52ec48.3a82cc","order":4,"disp":true,"width":"6","collapse":false},{"id":"2f52ec48.3a82cc","type":"ui_tab","name":"Testing","icon":"dashboard","order":10,"disabled":false,"hidden":false}]

[dceejay]

ok - have pushed one more fix to master to try to sort them out.