Hello,
I have the following problem and I hope you can help me because I just can’t find the error.
I use an expandable card, which works well in itself, but my problem is when I want to use the Toogle Switch for on / off the item is not switched but the card expands.
What am I missing? I have already pushed the switch to the top with z-index: 999 but no change.
uid: Lampensteuerung2
tags: []
props:
parameters:
- description: Name der Lampe/Birne.
label: Name
name: name
required: true
type: TEXT
- default: "3"
description: Lampentyp (1 = Nur Schalter, 2 = White, 3 = Color)
label: Lampentyp
name: lamptype
required: true
type: INTEGER
min: 1
max: 3
- default: "1"
description: hue Lampe (0 = Nein, 1 = Ja)
label: hue
name: hue
required: true
type: INTEGER
min: 0
max: 1
- context: item
label: Schalter
name: switch
required: true
type: TEXT
- context: item
description: Farbe
label: Farbe
name: color
required: true
type: TEXT
- context: item
description: Farbtemperatur
label: Farbtemperatur
name: colorTemperature
required: true
type: TEXT
timestamp: Sep 1, 2021, 8:34:54 AM
component: f7-card
config:
expandable: true
swipeToClose: false
backdrop: false
class:
- card-expandable-animate-width
style:
height: 32px
width: auto
z-index: 0
slots:
content:
- component: f7-card-content
config:
style:
width: 100%
padding-top: 0px
padding-left: 10px
padding-right: 10px
z-index: 1
slots:
default:
- component: f7-block
config:
class:
- no-padding
style:
margin: 0px
height: 45px
slots:
default:
- component: f7-row
config:
style:
height: 30px
width: 100%
white-space: nowrap
flex-wrap: nowrap
class:
- align-items-center
slots:
default:
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: oh-toggle
config:
item: =props.switch
style:
z-index: 999
- component: f7-col
config:
style:
width: auto
slots:
default:
- component: Label
config:
text: =props.name
font-size: 24px
style:
color: grey
overflow: hidden
white-space: nowrap
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: oh-button
config:
visible: =props.lamptype > 1
iconF7: arrowtriangle_down_square
iconColor: gray
iconSize: 28px
action: variable
actionVariable: Unfold
actionVariableValue: '=(vars.Unfold == "null") ? true : !(vars.Unfold)'
style:
position: absolute
top: 0px
right: 0px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: oh-button
config:
iconF7: xmark_circle
iconColor: gray
iconSize: 28px
action: variable
actionVariable: Unfold
actionVariableValue: '=(vars.Unfold == "null") ? false : !(vars.Unfold)'
style:
position: absolute
top: 0px
right: 0px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
style:
height: auto
slots:
default:
- component: oh-list
config:
class:
- padding
slots:
default:
- component: Label
config:
visible: =props.lamptype == 3
text: Farbe
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: grey
- component: oh-colorpicker
config:
visible: =props.lamptype == 3
item: DeckenlampeFlurFarbe
Best regards,
Björn