Hello.
I just started messing around with widgets, and made a widget for my energy meters. This way i wont have to use 5 cells for each energy meter.
Only problem is spacing. As you can see in the picture below, theres no spacing between them. Horizontaly its ok, but its really annoying vertically(especialy on mobile).
I tried using rows with labels to separate them, which works but also uses a lot of space(too much space between them).
Is there a way to get space between them vertically? If not, is there another alternative to make it look better?
uid: AMS
tags: []
props:
parameters:
- description: AMS måler
label: Description
name: Title
required: false
type: TEXT
- context: item
description: Effekt
label: Aktiv Effekt
name: Effekt
required: true
type: TEXT
- context: item
description: Max effekt
label: Max effekt
name: MaxEffekt
required: true
type: TEXT
- context: item
description: Fasestrøm L1
label: I1
name: I1
required: true
type: TEXT
- context: item
description: Fasestrøm L2
label: I2
name: I2
required: true
type: TEXT
- context: item
description: Fasestrøm L3
label: I3
name: I3
required: true
type: TEXT
timestamp: Sep 27, 2021, 9:20:24 AM
component: f7-card
config:
outline: true
noBorder: false
padding: false
noShadow: true
style:
--f7-safe-area-right: 0
--f7-safe-area-left: 0
slots:
content:
- component: oh-label-card
config:
label: =(props.Title)
noShadow: false
footer: Aktiv effekt
vertical: false
- component: oh-label-card
config:
noShadow: false
footer: Max effekt
item: =(props.Effekt)
icon: oh:energy
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.Effekt]
trendItem: =(props.Effekt)
vertical: false
style:
background: =(props.Effekt.state.split(" ")[0] <= 1) ? "lightgrey":"yellow"
- component: oh-label-card
config:
noShadow: false
footer: Fasestrøm I1
item: =(props.MaxEffekt)
icon: oh:energy
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.MaxEffekt]
trendItem: =(props.MaxEffekt)
vertical: false
style:
background: =(props.MaxEffekt.state.split(" ")[0] <= 1) ? "red":"yellow"
- component: oh-label-card
config:
noShadow: false
footer: Fasestrøm I2
item: =(props.I1)
icon: oh:energy
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.I1]
trendItem: =(props.I1)
vertical: false
style:
background: =(props.I1.state.split(" ")[0] <= 1) ? "lightgrey":"yellow"
- component: oh-label-card
config:
noShadow: false
footer: Fasestrøm I3
item: =(props.I2)
icon: oh:energy
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.I2]
trendItem: =(props.I2)
vertical: false
style:
background: =(props.I2.state.split(" ")[0] <= 1) ? "lightgrey":"yellow"
- component: oh-label-card
config:
noShadow: false
item: =(props.I3)
icon: oh:energy
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.I3]
trendItem: =(props.I3)
vertical: false
style:
background: =(props.I3.state.split(" ")[0] <= 1) ? "lightgrey":"yellow"
Tried searching but only found this, which is the oposite of my problem.
Also read through the documentation for the F7-card