How to align icon and slider in UI template?


#1

Hi,

Am not able to align the icon and slider when using the ui template. Any hints?? :disappointed_relieved:

Thanks

[{"id":"d7067af1.e3b428","type":"tab","label":"Flow 8","disabled":false,"info":""},{"id":"40f78710.14fa68","type":"inject","z":"d7067af1.e3b428","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":260,"wires":[["d920f4af.1c0688"]]},{"id":"a6745e36.b76f8","type":"inject","z":"d7067af1.e3b428","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":300,"wires":[["d920f4af.1c0688"]]},{"id":"d920f4af.1c0688","type":"ui_template","z":"d7067af1.e3b428","group":"db653d85.1a5c5","name":"","order":1,"width":"6","height":"2","format":"<div class=\"svg\">\n<md-icon md-svg-src=\"{{msg.payload == 1 ? '/idea.svg' : '/ideaoff.svg' }}\" style=\"width: 64px; height: 64px;\"></md-icon>\n</div>\n<div class=\"myslider\">\n<md-slider ng-model=\"myValue\" min=\"10\" max=\"100\">\n</md-slider>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":660,"y":280,"wires":[[]]},{"id":"9a5d758c.4a9468","type":"ui_template","z":"d7067af1.e3b428","group":"db653d85.1a5c5","name":"CSS for UI Template","order":3,"width":0,"height":0,"format":"<style>\n .svg{\n margin: 5px auto auto;\n padding: 0;\n float:left;\n display: inline-block !important;\n background-repeat: no-repeat no-repeat;\n pointer-events: none;\n position:absolute;\n}\n .text{\n text-align:center;\n color:magenta;\n }\n .myslider{\n float:left;\n display: inline-block !important;\n /*display: inline-block;*/\n margin-left:10px;\n margin-top:auto;\n position:absolute;\n}\n </style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":500,"y":140,"wires":[[]]},{"id":"db653d85.1a5c5","type":"ui_group","z":"","name":"Dimmer Livingroom","tab":"bb442198.86484","disp":true,"width":"6","collapse":false},{"id":"bb442198.86484","type":"ui_tab","z":"","name":"Lights","icon":"dashboard"}]


#2

I can't import your node ?!