The presence of a v-switch in a ui-template affects the positioning of core ui-switch node

[colinl]

Current Behavior

With the flow below, with a core ui-switch and a v-switch in a ui-template the core switch is displaced vertically Adding this styling to the template fixes it

<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";

See also forum post https://discourse.nodered.org/t/vertical-alignment-of-ui-template-widgets-in-dashboard/87545/3

Expected Behavior

No response

Steps To Reproduce

Import

[{"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<!--\n<style>\n    .v-input--horizontal {\n        grid-template-areas: none;\n    }\n</style>\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"}}]

Remove the comments around the Style tag to see the solution.

Environment

• Dashboard version: 1.8.1
• Node-RED version: 4.0.0_Beta.2
• Node.js version:
• npm version:
• Platform/OS:
• Browser: Edge

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate