Vertical alignment of ui-template widgets in dashboard

Dashboard
1

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

<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

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

2

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.

[{"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"}}]
3

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 :person_shrugging:

Add the below style to your template.

<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:

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

chrome_88tSfMQNgs

2 Likes
4

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.

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

5

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