Vertical alignment of ui-template widgets in dashboard

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

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"}}]

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

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.

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

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