# How do I change the height or the spacing between the \`ui\_switch\` elements?

**URL:** <https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [14 September 2024 17:07 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983 "2024-09-14T17:07:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [14 September 2024 17:07 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/1 "2024-09-14T17:07:13Z")

</div>

I want to reduce the height or spacing of the `ui_switch` elements in a specific group so that I can display multiple switches on a single page.

---

<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:** [14 September 2024 17:59 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/2 "2024-09-14T17:59:31Z")

</div>

Hi @xxxSRxxx, a more general purpose approach is to change the Theme's [Row Height](https://dashboard.flowfuse.com/nodes/config/ui-theme.html#row-height)

This will affect all widgets on that page though

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [15 September 2024 08:23 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/3 "2024-09-15T08:23:55Z")

</div>

Hi @joepavitt thank you for your quick answer, where can I set Row Height compact?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 September 2024 09:30 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/4 "2024-09-15T09:30:11Z")

</div>

> [@xxxSRxxx](#):
>
> where can I set Row Height compact

> [@joepavitt](#):
>
> the Theme

e.g.

![chrome_i8xsAzhPDx](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/edaedec5fde23f31ed474a71a1a2215e8fd54338.gif)

---

<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:** [15 September 2024 16:28 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/5 "2024-09-15T16:28:42Z")

</div>

It is also available in the Dashboard sidebar:

 ![Screenshot 2024-09-15 at 17.28.24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51ad970a06e0e49a0e14efa07a1901b52fb01d66.png)

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [16 September 2024 17:25 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/6 "2024-09-16T17:25:35Z")

</div>

You talking about Dashboard 2.0 - correct ? I have only Dashboard.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [16 September 2024 23:08 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/7 "2024-09-16T23:08:51Z")

</div>

@xxxSRxxx  
As you are new here, I would strongly suggest you install the newer/est of the dashboards.

aka `dashboard-2`

Just as the _old_ (original?) one is now kind of at _end of life_ it would be better for you to start with the latest version.

That way you don't get any _old habits_ that may hold you back with the newer version.

It has a lot more options than the older one and the way they are done (most likely) will be different.

I do appreciate that it may be _annoying_ to do this, but I think in the bigger picture, you will not regret it.

All the best.

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [21 September 2024 16:39 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/8 "2024-09-21T16:39:46Z")

</div>

The solution of Dashboard 2.0 is not practical for me, as it seems that Node-RED has implemented it poorly for someone transitioning from Dashboard 1.0. It is very unfortunate that there are new switches instead of adapting the old ones for the new Dashboard 2.0. How does Node-RED expect me to adjust over 135 switches?

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [21 September 2024 16:41 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/9 "2024-09-21T16:41:52Z")

</div>

Is there no other way to set the height of the switches via `ui_template` in a CSS class?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 September 2024 17:15 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/10 "2024-09-21T17:15:59Z")

</div>

What is it that you believe you have to change in each node? Does the theme change not work for you?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2024 17:24 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/11 "2024-09-21T17:24:34Z")

</div>

Can you show us a screen capture of the switches you have now, with a more precise explanation of how you want them to be different?

An annotated diagram: an arrow with "This spacing is too big" would be very helpful.

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [21 September 2024 18:59 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/12 "2024-09-21T18:59:28Z")

</div>

i need the space like in picture 2 (less hight or less space)

 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/3/c396f0f48da0665d08f294ce23364cf150b2eb1c.jpeg)

 ![4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e988be9f19850b12b97c254cf32a62dd938d10c0.jpeg)

---

<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:** [21 September 2024 19:30 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/13 "2024-09-21T19:30:25Z")

</div>

I think that the question is not about the one node and space between but overall layout options. And that doesn't start from widgets but concept and devices or screens where it will be used which all you haven't described.

Yes the DB2 is different but definitely not worse. But knowing nothing about your project, the discussion has no value for anyone.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 September 2024 19:38 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/14 "2024-09-21T19:38:25Z")

</div>

Just to be clear, which dashboard are you talking about where you want to reduce the row height? If DB2 have you made the suggested change to the theme?

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [21 September 2024 21:13 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/15 "2024-09-21T21:13:46Z")

</div>

DB2 is not an option for me, beauce there are too much work for me. I will be still on on DB 1 !

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [21 September 2024 21:19 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/16 "2024-09-21T21:19:25Z")

</div>

@hotNipi, you are my hero in Node-RED. But if you took a look at my dashboard in Node-RED, you would understand that I cannot easily switch to Dashboard 2.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 September 2024 21:50 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/17 "2024-09-21T21:50:54Z")

</div>

> [@xxxSRxxx](#):
>
> i need the space like in picture 2

The easiest way to achieve this is using the widget height setting in the Dashboard sidebar.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f510b54a078b92793cff765551ff42eb4333e2cf.png)

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

This setting will affect all dashboard widgets though so make sure you don't cramp other areas of the dashboard.

> [@xxxSRxxx](#):
>
> no other way to set the height of the switches via `ui_template` in a CSS class?

I can't make this work, the 48px height from the template settings always overrides it.

No doubt you are aware that if you change your switch widgets from "Auto" to eg 3x1 you can fit more into the available screen space.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/303661996f1620d44294540e06016e15dbc40da2.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:** [22 September 2024 07:45 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/18 "2024-09-22T07:45:34Z")

</div>

User level density override for DB2 .  
Example contains only switch nodes. Every node may have something more to adjust.

1. Add class for ui-page  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d55099f4cbb8f83f08fad0dc1dd34524a504f6b.png)
2. With ui-template targeted to CSS All pages add rules:

```auto
:root{
    --widget-row-height:24px;
}
.user-density{
    --widget-gap:4px;
}

.user-density .v-selection-control--density-default{
    --v-selection-control-size:24px;
}

```

The outcome should be something like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed41f9c2bf8cc185538ece4f58435ef42a8f4abf.png)

---

<div class="post-metadata">

**Author:** ![xxxSRxxx](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xxxsrxxx/32/94517_2.png) [@xxxSRxxx](https://discourse.nodered.org/u/xxxSRxxx)\
**Post date:** [22 September 2024 09:22 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/19 "2024-09-22T09:22:51Z")

</div>

@all - Thank you very much for your help.  
@hotNipi - It works great, but one last question: where can I find the "Allow swipe between tabs" option in the settings of Dashboard 2.0?  
 ![swipe](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05f76a4f0fd6ffeb53d08d1cf5a038380d44a947.jpeg)

---

<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:** [22 September 2024 09:45 UTC](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983/20 "2024-09-22T09:45:36Z")

</div>

I don't think such exists for DB2.

[Next page](https://discourse.nodered.org/t/how-do-i-change-the-height-or-the-spacing-between-the-ui-switch-elements/90983.md?page=2)