search

node-red / node-red-dashboard

A dashboard UI for Node-RED
Other
1.32k stars 454 forks source link

google material icons not loaded correctly #737

Closed Bond246 closed 1 year ago

Bond246 commented 3 years ago

Hello,

i generated a new "kitchen"-tab in my dashboard and searched for a suitable icon which i found in the google material pack. I tooked "mi-soup_kitchen" that looks like a ladle: https://fonts.google.com/icons?selected=Material+Icons+Outlined:assignment_returned&icon.query=soup_kitchen

1st problem is the dashboard just loads the icon of a fridge not the ladle. 2nd problem is that the left margin of the icon gets really wide. I briefly checked that with firefox dev-tools and it looks like that the space comes from the word "soup_kitchen".

If i use the google icon for other dashboards elements, not for tabs the space-problems seems to be the same.

grafik

Please tell us about your environment:

dceejay commented 3 years ago

Hmm - works for me image image

Bond246 commented 3 years ago

Thanks for testing!

hmm... any idea how to get closer to the problem?

dceejay commented 3 years ago

maybe share a small part of your flow that shows the problem ?

Bond246 commented 3 years ago

[{"id":"bf9d665380e6fd07","type":"ui_text","z":"8ae6f2d337b2f477","group":"989324d0e799fc86","order":3,"width":3,"height":1,"name":"","label":"Präsenz:","format":"{{msg.payload}}","layout":"row-left","className":"","x":460,"y":200,"wires":[]},{"id":"9be05f1947325bb1","type":"ui_text","z":"8ae6f2d337b2f477","group":"989324d0e799fc86","order":4,"width":3,"height":1,"name":"","label":"Lum.:","format":"{{msg.payload.lux}}lux","layout":"row-right","className":"","x":450,"y":240,"wires":[]},{"id":"989324d0e799fc86","type":"ui_group","name":"Schalter","tab":"679850fbcb7b789c","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"679850fbcb7b789c","type":"ui_tab","name":"Küche","icon":"mi-soup_kitchen","order":4,"disabled":false,"hidden":false}]

i havn't done some magic...

dceejay commented 3 years ago

indeed - still ok here image Not sure what to suggest apart from restart server and making sure browser cache clear - and that internet connection is working. - Is there anything in the browser debug console ?

Bond246 commented 3 years ago

Today i tested the above code-snipped on a completely different installation. Different network conditions, different geo-location. That install is still on NR v2.0.5 and dashboard 3.0.4.

Same problem.

Output on the browser debug-log:

You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material! app.min.js:150:202

Rendered http://ubuntu-home:1880/ui/css/app.min.less successfully. app.min.js:530:142657

CSS for http://ubuntu-home:1880/ui/css/app.min.less generated in 110ms app.min.js:530:142657

Less has finished. CSS generated in 110ms app.min.js:530:142657

SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:150:202

SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:150:202

Rendered http://ubuntu-home:1880/ui/css/app.min.less successfully. app.min.js:530:142657

CSS for http://ubuntu-home:1880/ui/css/app.min.less generated in 33ms app.min.js:530:142657

Less has finished. CSS generated in 33ms app.min.js:530:142657

Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://ubuntu-home:1880/ui/js/app.min.js
Source-Map-Adresse: angular-chart.min.js.map

Error: Promised response from onMessage listener went out of scope
sniicker commented 1 year ago

i had the exact same Problem and got the same msg in the browser.

Updated the dashboard palette to the actual version helped me to display the icon properly

Bond246 commented 1 year ago

i haven't thought about it anymore and just used "restaurant" instead. But yes, with my latest version it works too for me.

Thanks 💯