# Clock on toolbar

**URL:** <https://discourse.nodered.org/t/clock-on-toolbar/31484>\
**Category:** General\
**Created:** [12 August 2020 16:58 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484 "2020-08-12T16:58:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [12 August 2020 16:58 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/1 "2020-08-12T16:58:59Z")

</div>

Hi, guys I found this code of a clock toolbar but it apears on the top right corner I wanted in the middle some help

```auto
[{"id":"4a511482.a2accc","type":"ui_template","z":"33639ff3.68c29","group":"","name":"Reloj","order":0,"width":0,"height":0,"format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n if($('.md-toolbar-tools').length != 0){\n loadClock();\n }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n \n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleString());\n }\n\n if(document.clockInterval){ \n clearInterval(document.clockInterval);\n document.clockInterval = null;\n }\n \n document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1090,"y":140,"wires":[[]]}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 August 2020 19:21 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/2 "2020-08-12T19:21:01Z")

</div>

Play with the margin styling you are using:  
` div[0].style.margin = '5px 5px 5px auto';`  
and you should be able to get it centered. Hint: I'd change one of the values to a percentage.

---

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [12 August 2020 19:25 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/3 "2020-08-12T19:25:21Z")

</div>

Thanks @zenofmud, what do you mean to a percentage?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 August 2020 19:28 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/4 "2020-08-12T19:28:42Z")

</div>

Why don't you do some CSS homework and read up on the 'CSS margin Property` [https://www.w3schools.com/cssref/pr\_margin.asp](https://www.w3schools.com/cssref/pr_margin.asp)

---

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [12 August 2020 19:33 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/5 "2020-08-12T19:33:30Z")

</div>

thanks I'll read it. It works thanks

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 August 2020 19:33 UTC](https://discourse.nodered.org/t/clock-on-toolbar/31484/6 "2020-08-26T19:33:38Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.