# Vertical alignment of ui-template widgets in dashboard

**URL:** https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [27 April 2024 10:49 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545 "2024-04-27T10:49:52Z")
**Posts on this page:** 6
**Page:** 1

<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: [27 April 2024 10:49 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/1 "2024-04-27T10:49:52Z")

</div>

I have a v-switch in a ui-template. Defined using

```auto
<template>
    <div>
        <v-switch label="Template switch">
        </v-switch>
    </div>
</template>

```

with no particular styling applied. Alongside I have a core ui-switch node and I see  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/40200f21175829cca6e45eb10c556199a5b145ba.png)

As can be seen the widgets are not aligned correctly. What is the best way to align the template with the core?

**Edit** Simplified template code above

---

<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: [29 April 2024 14:21 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/2 "2024-04-29T14:21:33Z")

</div>

Can anyone suggest a solution to this? I have studied the docs and attempted to understand the styling in the developer tools but can't work out how to sort it.  
Here is a very simple flow showing the problem.

```auto
[{"id":"28a39f42741fc35a","type":"ui-template","z":"997da33a0beedade","group":"5bedf37399d50d05","name":"template switch","order":2,"width":"2","height":"1","head":"","format":"<template>\n <div>\n <v-switch label=\"template switch\">\n </v-switch>\n </div>\n</template>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":5040,"wires":[[]]},{"id":"b090e22b2dc7b744","type":"ui-switch","z":"997da33a0beedade","name":"","label":"ui-switch","group":"5bedf37399d50d05","order":1,"width":"2","height":"1","passthru":false,"topic":"topic","topicType":"msg","style":"","className":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":260,"y":5040,"wires":[[]]},{"id":"5bedf37399d50d05","type":"ui-group","name":"Alignment test","page":"a3572ccda734f2c0","width":"6","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"a3572ccda734f2c0","type":"ui-page","name":"Alignment test","ui":"ID-BASE-1","path":"/page6","icon":"home","layout":"grid","theme":"f9b6670b127dc219","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard"},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<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: [29 April 2024 14:36 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/3 "2024-04-29T14:36:43Z")

</div>

It comes from `.v-input--horizontal` \> `grid-template-areas` value but i am not certain where that is applied - might be a veutify bug or something we need to handle 🤷

Add the below style to your template.

```auto
<style>
    .v-input--horizontal {
        grid-template-areas: none;
    }
</style>

```

For reference, the value of `v-input--horizontal` without the above rule has the following value:

```auto
grid-template-areas: "prepend control append"
                     "a messages b";

```

![chrome_88tSfMQNgs](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/56f9b992448cea713d6d393f37d270d25a943742.gif)

---

<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: [29 April 2024 14:50 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/4 "2024-04-29T14:50:50Z")

</div>

Brilliant, thanks. I had assumed that it was the template switch that was appearing in the wrong place, not that the presence of the template was affecting where the core switch appeared.

> [@Steve-Mcl](#):
>
> might be a veutify bug or something we need to handle

I will raise an issue so it will be considered, at some point.

---

<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: [29 April 2024 15:07 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/5 "2024-04-29T15:07:05Z")

</div>

Raised issue [The presence of a v-switch in a ui-template affects the positioning of core ui-switch node · Issue #816 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/816)

---

<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: [13 May 2024 15:07 UTC](https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/6 "2024-05-13T15:07:19Z")

</div>

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