UI-gauge layout for phone

Dashboard
,
41

sorry to be a nuisance but after some hours of trying stuff I'm stuck. For example the native switch has the label preceding the switch and does not right justify. On the vuetify site they have a switch template which looks great.

type or paste <v-switch
              color="indigo"
              label="indigo"
              value="indigo"
              hide-details
            ></v-switch>
 code here

I don't know how to introduce an input and get an output which also passes through. I've tried messing with CSS but I'm way out of my depth.

42

We have announced the deprecation. We aren’t planning to remove or delete the repository so you can carry on using it at your own risk for as long as you like.

43

Can you post a link to what you want the switch to look like? Or a screenshot.

44

Screenshot_20240820_210509_Firefox
Screenshot_20240820_210509_Firefox1080×2400 167 KB

The top half all use simple v-switch templates and are nicely formatted with the button to the left of label. Bottom half are some native switch elements. Problem is that if i use the template i need to have payload input to switch on as well as passthrough which the native widget provides. I'm struggling with this. I can happily go with the built in version. Just keen to learn CSS etc

45

You don't need passthrough, just use pass round (feed whatever is coming in at the front also to wherever the output goes.

I suggest you start a new thread with a title that reflects what you want to achieve - label on RHS. Or would label on LHS do if it were right justified? I suspect that is just CSS but that is not my area of expertise. I suspect that putting the label on the other side would need changes to the switch code.

46

OK I'll try that. Thanks again.

47

Alternatively you could configure the switches as 1x1 and use text nodes for the labels. Then you can put the label where you want.

48

I'll try that.

49

Just to check, what's the issue here with using the built-in switch widget? Is it that you want the switch element on the left, and the label on the right?

If so, that's a perfectly reasonable request on the core functionality for us to build in.

50

Yes built in would be much easier, but it would look much better if the label was to the right and justified left.

51

To me I don't think left or right is really the issue.
The problem is the text touching the next "column" which could be helped with bigger padding, and longer text needs to line wrap ?

52

Could you open a feature request please?

53

Hi Colin, I have upgraded to gauges 1.3 and now my 3x3 format on mobile phone is unreadable.
The gauges are smaller and enclosed in square frame. Maybe I'm missing something but can I go back to vers. 1.2? And how...

54

Are you talking about node-red-dashboard-ui-gauge-classic? If so then this isn't really the right thread for the question.

If you are using the classic gauge, are you using a development build of the dashboard? If so that is a problem with the development build, it is ok with a normal build. Probably it is this issue If a custom widget is built in development mode then grid-row-end style is not present in the wrapper div · Issue #885 · FlowFuse/node-red-dashboard · GitHub

55

Aargh, no, you are right, something has gone wrong somewhere.
Investigating...

56

For the moment you can install the previous version by going into your .node-red directory and running
npm install @colinl/node-red-dashboard-2-ui-gauge-classic@1.2.1
Then restart node-red.

57

Thanks Colin I'll do that.

58

This should now be fixed. Version 1.3.1 should be available via package manager within an hour (refresh the browser before checking) or can be installed manually using
npm install @colinl/node-red-dashboard-2-ui-gauge-classic@latest
and then restarting node-red.

59

All sorted.... thanks

60

Great, thanks for checking it.