FlowFuse / FlowFuse/node-red-dashboard

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

Open
#816 0 comments 0 reactions 0 assignees View on GitHub
size:S type:bug
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
![image](https://github.com/FlowFuse/node-red-dashboard/assets/38307/c88cee0c-8afa-4fc4-bde6-8e7143a7580b)
Adding this styling to the template fixes it
```

.v-input--horizontal {
grid-template-areas: none;
}

```
![image](https://github.com/FlowFuse/node-red-dashboard/assets/38307/87b0fd59-da2c-4c1f-8cbd-600c6eb22d94)

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

\n \n \n
\n\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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.