FlowFuse / FlowFuse/node-red-dashboard
The presence of a v-switch in a ui-template affects the positioning of core ui-switch node
- Dominant language
- HTML
- Stars
- 355
- Forks
- 82
- Avg merge
- 4d 20h
- Merged PRs (30d)
- 24
Description
### 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
```
.v-input--horizontal {
grid-template-areas: none;
}
```

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":"\n
```
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
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.