# Customizing appearance of Dashboard 2 ui-switch

**URL:** <https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [21 August 2024 09:48 UTC](https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308 "2024-08-21T09:48:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [21 August 2024 09:48 UTC](https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308/1 "2024-08-21T09:48:12Z")

</div>

I am displaying 9 switches in 3x3 formation on my phone. The ui places the text to the left of the switch and is left justified. It would look much neater if the text were to the right and left justified or even to the left and right justified. I've tried messing with CSS but not getting anywhere.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 August 2024 11:16 UTC](https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308/2 "2024-08-21T11:16:26Z")

</div>

Define the following custom CSS in a `ui-template` node:

```auto
.nrdb-switch {
    flex-direction: row-reverse;
}

```

That will give you:

![Screenshot 2024-08-21 at 12.16.32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df62498714548c6f7045fbd6322550f97502e453.png)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [22 August 2024 21:27 UTC](https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308/3 "2024-08-22T21:27:52Z")

</div>

> [@joepavitt](#):
>
> ```auto
> .nrdb-switch {
> flex-direction: row-reverse;
> }
> 
> ```

perfect... 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:** [5 September 2024 21:28 UTC](https://discourse.nodered.org/t/customizing-appearance-of-dashboard-2-ui-switch/90308/4 "2024-09-05T21:28:23Z")

</div>

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