# How to rotate a text ui

**URL:** https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657
**Category:** Dashboard
**Created:** [28 April 2020 03:35 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657 "2020-04-28T03:35:53Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)
#### Post date: [28 April 2020 03:35 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/1 "2020-04-28T03:35:53Z")

</div>

Greetings everyone,

I would like to know whether the text ui in the dashboard able to rotate for -90° or not. Thanks in advance.

Best Regards.

This is my dashboard :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38d5b9140191ffe47ff9499b6c44558fb6fdc958.png)

This is the example of rotated text dashboard found at the internet:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8e8ef97e547e34854407ee0f2e545bcac46f3ff2.png)

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [28 April 2020 10:51 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/2 "2020-04-28T10:51:54Z")

</div>

not sure if you are asking or showing us what you have done. If the former - I can't think of a way myself - if the latter then well done - please share !

---

<div class="post-metadata">

### Author: ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)
#### Post date: [29 April 2020 01:13 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/3 "2020-04-29T01:13:37Z")

</div>

Thank you for the reply.

> [@dceejay](#):
>
> showing us what you have done

No, I didn't. The second image is the one I found it on the internet, which I wish to achieve the same like it.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 April 2020 07:45 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/4 "2020-04-29T07:45:52Z")

</div>

Can't say if it will be perfect but something like this can be done

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a6742f13de820c7267686ee9734d97863c99eef.png)

```auto
[{"id":"61b6a155.7ef1b","type":"ui_template","z":"b633308d.4a91a","group":"2d39c4ed.6ee85c","name":"vertical text","order":1,"width":1,"height":"3","format":"<style>\n.rotated {\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n white-space: nowrap;\n text-align: center;\n margin: auto;\n width: 50%;\n font-weight:500;\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">ROTATED TEXT<div>\n \n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t\tel.style.backgroundColor = \"#4c75db\";\n\t}\n}\nupdateContainerStyle(document.getElementById(\"blue-rotated\"))\n</script>\n\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":510,"y":220,"wires":[[]]},{"id":"2d39c4ed.6ee85c","type":"ui_group","z":"","name":"HOME","tab":"4486cc51.18fc44","order":1,"disp":true,"width":4,"collapse":false},{"id":"4486cc51.18fc44","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)
#### Post date: [29 April 2020 07:51 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/5 "2020-04-29T07:51:10Z")

</div>

Yes, this should help too. Thank you for helping so much 🙏🏻 🙏🏻

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 April 2020 07:54 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/6 "2020-04-29T07:54:53Z")

</div>

Oh there was bug in that template,  
fix this line

```auto
<div id="blue-rotated" class="rotated">ROTATED TEXT</div>

```

---

<div class="post-metadata">

### Author: ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)
#### Post date: [30 April 2020 05:07 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/7 "2020-04-30T05:07:50Z")

</div>

🤣Sorry for my stupid question, I had used your node and did for the rotation text. But I think the width is too large and which can be scroll, it there a way to reduce it?  
My current dashboard :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b1a854a154b340dff0943515bf695b44691cf425.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [30 April 2020 05:34 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/8 "2020-04-30T05:34:24Z")

</div>

May you try this then

```auto
<style>
.rotated {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    text-align: center;
    font-weight:500;
   
}
</style>

<div id="blue-rotated" class="rotated">{{msg.payload}}</div>
    
<script>
function updateContainerStyle (el) {
	el = el.parentElement
	if (el && el.classList.contains('nr-dashboard-template')) {
		el.style.background = "linear-gradient(90deg, rgba(76,184,254,1) 0%, rgba(21,128,219,1) 84%, rgba(39,125,215,1) 100%)";
		el.style.paddingTop = "36px";
        el.style.paddingLeft = "12px";
	}
}
updateContainerStyle(document.getElementById("blue-rotated"))
</script>

    

```

Edit:  
It will be better to adjust the container padding.  
But you then need to finetune the vaules to get text centered

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [30 April 2020 06:51 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/9 "2020-04-30T06:51:10Z")

</div>

Now you made me to working on this. To get it work on dynamic content the previous thing also fails.  
But there is better solution

```auto
[{"id":"61b6a155.7ef1b","type":"ui_template","z":"b633308d.4a91a","group":"2d39c4ed.6ee85c","name":"vertical text","order":1,"width":1,"height":"3","format":"<style>\n.rotated {\n writing-mode: tb-rl;\n white-space: nowrap;\n font-weight:500;\n margin: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-right: -50%;\n transform: translate(-50%, -50%) rotate(-180deg)\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">{{msg.payload}}</div>\n \n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t\tel.style.background = \"linear-gradient(90deg, rgba(76,184,254,1) 0%, rgba(21,128,219,1) 84%, rgba(39,125,215,1) 100%)\";\n\t}\n}\nupdateContainerStyle(document.getElementById(\"blue-rotated\"))\n</script>\n\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":100,"wires":[[]]},{"id":"d78b0778.6cffa8","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"MEDIUM TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":80,"wires":[["61b6a155.7ef1b"]]},{"id":"88f31749.bb5268","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":40,"wires":[["61b6a155.7ef1b"]]},{"id":"2e1ac32f.3fd39c","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"LONG LONG TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":120,"wires":[["61b6a155.7ef1b"]]},{"id":"2d39c4ed.6ee85c","type":"ui_group","z":"","name":"HOME","tab":"4486cc51.18fc44","order":1,"disp":true,"width":4,"collapse":false},{"id":"4486cc51.18fc44","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![jan-k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jan-k/32/17738_2.png) [@jan-k](https://discourse.nodered.org/u/jan-k)
#### Post date: [30 April 2020 08:55 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/10 "2020-04-30T08:55:52Z")

</div>

> [@hotNipi](#):
>
> Now you made me to working on this. To get it work on dynamic content the previous thing also fails.  
> But there is better solution

Yes, now it works! Thank you so much for the effort.😇 😇

---

<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: [14 May 2020 08:55 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657/11 "2020-05-14T08:55:55Z")

</div>

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