Centering a 'template node' in Dashboard Group

#1

A bit of help needed.
We have a Dashboard . We have a Group A with width = 15.
Placed a <> Template node and all works.
However, how do we get the <> Template Node to be 'CENTERED' within the Dashboard Group A ?

It seems the <>template is left justified.

Thank you for any guidance.

0 Likes

#2

Did you try to wrap it with a parent like this?

<div style="text-align: center;">
    Your template here
</div>
0 Likes

#3

The dashboard group that is holding this element is 15 wide
the image is showing but it is LEFT justified. Trying to Center this image element in this dashboard group.
Tried a few things including the following but not successful.

<img ng-src={{msg.payload}}  height="auto" width="100%" />
0 Likes

#4

Widgets are packed into the group left to right so yes it is left justified within the group. If you make your template either width 15 - or auto (which should do the same) then inside your template you can justify as you wish.

0 Likes

#5

Yup, as already mentioned, just wrap it around and you are good to go.

[{"id":"4ea938f1.c58308","type":"ui_template","z":"3a57f289.02bc66","group":"53ad7933.7f9b98","name":"","order":0,"width":0,"height":0,"format":"<div style=\"text-align: center\">\n    <img src=\"https://www.automatiserar.se/wp-content/uploads/2017/10/Node-RED.jpg\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":700,"wires":[[]]},{"id":"53ad7933.7f9b98","type":"ui_group","z":"","name":"width15","tab":"fa232f71.167e7","disp":true,"width":"15","collapse":false},{"id":"fa232f71.167e7","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":3}]

I get vertical scroll in this example but it seems to be standard Dashboard issue unfortunately.

0 Likes

#6

That may be slightly better in latest master version. (not yet on npm)

0 Likes