Can someone please help me. I just can’t figure this out.
I have created an expandable card widget inspired by a few other similar widgets here on the forum.
It is mostly working well, but the problem is that slider items don’t use the full width of the card when expanded. They only go as far as the non-expanded card was wide before it expanded. Make sense?
I think I have tracked it down as far as being something to do with - card-expandable-animate-width on line 71.
When I remove this line the sliders behave as expected, but obviously this has broken the positioning and alignment of everything as they don’t move about properly with the expanding card.
The annoying thing is, is that this works properly in the widget editor, but when loaded in a real page the sliders are broken again.
In my widget editor:
In a page
uid: widget_heating-TRVControls
props:
parameters:
- description: Location
label: Location
name: location
required: false
type: TEXT
- context: item
label: Humidity
name: humid
required: false
type: TEXT
- context: item
label: Temperature
name: temp
required: false
type: TEXT
- context: item
label: Target Temperature
name: targetTemp
required: false
type: TEXT
- context: item
label: Heating Power
name: heatP
required: false
type: TEXT
- context: item
label: Zone Operation Mode
name: zoneOp
required: false
type: TEXT
- context: item
label: HVAC Mode
name: hvac
required: false
type: TEXT
- context: item
label: Timer Duration
name: timerD
required: false
type: TEXT
- context: item
label: Overlay End Time
name: oETime
required: false
type: TEXT
- context: item
label: Battery Low Alarm
name: battery
required: false
type: TEXT
- context: item
label: Contact Sensor 1
name: open1
required: false
type: TEXT
- context: item
label: Contact Sensor 2
name: open2
required: false
type: TEXT
timestamp: Jun 13, 2021, 8:56:44 AM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- card-expandable-animate-width
style:
background: '=(items[props.temp].state < "17") ? "linear-gradient(to bottom, hsla(207, 90%, 54%, 1), hsla(207, 90%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "17" && items[props.temp].state < "18") ? "linear-gradient(to bottom, hsla(130, 65%, 57%, 1), hsla(130, 65%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "18" && items[props.temp].state < "19") ? "linear-gradient(to bottom, hsla(66, 70%, 54%, 1), hsla(66, 70%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "19" && items[props.temp].state < "20") ? "linear-gradient(to bottom, hsla(48, 100%, 50%, 1), hsla(48, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "20" && items[props.temp].state < "22") ? "linear-gradient(to bottom, hsla(35, 100%, 50%, 1), hsla(35, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "22" && items[props.temp].state < "23") ? "linear-gradient(to bottom, hsla(20, 100%, 57%, 1), hsla(20, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "23" && items[props.temp].state < "24") ? "linear-gradient(to bottom, hsla(349, 100%, 59%, 1), hsla(349, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": (items[props.temp].state >= "24") ? "linear-gradient(to bottom, hsla(3, 100%, 59%, 1), hsla(3, 100%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )": "white"'
height: 170px
width: auto
margin: 5px
margin-top: 10px
slots:
default:
- component: oh-button
config:
iconF7: ellipsis
iconSize: 30px
color: gray
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-right: 15px
padding-bottom: 40px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
config:
style:
padding-top: 30px
slots:
default:
- component: f7-icon
config:
material: '=(items[props.heatP].state > 0 ) ? "local_fire_department": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "sensor_window" : "power_settings_new"'
size: '=(items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "80px" : (items[props.heatP].state == 0) ? "50px" : 40 ++ items[props.heatP].state + "px"'
color: '=(items[props.heatP].state == 0) ? "black": (items[props.heatP].state >= 1 && items[props.heatP].state < 20) ? "lightblue": (items[props.heatP].state >= 20 && items[props.heatP].state < 40) ? "teal": (items[props.heatP].state >= 40 && items[props.heatP].state < 60) ? "yellow": (items[props.heatP].state >= 60 && items[props.heatP].state < 80) ? "orange": (items[props.heatP].state >= 80 && items[props.heatP].state <= 100) ? "red": "white"'
style:
opacity: '=(items[props.heatP].state > 0 ) ? items[props.heatP].state * 1.5 + "%": "100%"'
position: absolute
top: '=(items[props.heatP].state > 0 ) ? 120 + -items[props.heatP].state + "px": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "75px" :"95px"'
right: '=(items[props.heatP].state > 0 ) ? 40 + -items[props.heatP].state * 0.5 + "px": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "18px" : "15px"'
- component: f7-chip
config:
text: '=(items[props.heatP].state > 0) ? items[props.heatP].state + " %": (items[props.open1].state == "OPEN" || items[props.open2].state == "OPEN") ? "OPEN WINDOW": "0%"'
color: '=(items[props.heatP].state == 0) ? "black": (items[props.heatP].state >= 1 && items[props.heatP].state < 20) ? "lightblue": (items[props.heatP].state >= 20 && items[props.heatP].state < 40) ? "teal": (items[props.heatP].state >= 40 && items[props.heatP].state < 60) ? "yellow": (items[props.heatP].state >= 60 && items[props.heatP].state < 80) ? "orange": (items[props.heatP].state >= 80 && items[props.heatP].state <= 100) ? "red": "white"'
style:
position: absolute
top: 140px
right: 20px
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 30px
color: black
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: oh-link
config:
class:
- cell-open-button
- card-opened-fade-out
- justify-content-flex-end
style:
width: auto
height: auto
position: absolute
top: 0
left: 0
z-index: 0
- component: f7-block
config:
class:
- no-padding
style:
margin: 0px
height: 200px
width: auto
slots:
default:
- component: f7-row
config:
style:
height: 65px
width: 100%
white-space: nowrap
flex-wrap: nowrap
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =props.location
style:
font-weight: 600
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-chip
config:
text: =items[props.temp].displayState
color: '=(items[props.temp].state > "1" && items[props.temp].state < "17") ? "blue": (items[props.temp].state >= "17" && items[props.temp].state < "18") ? "green": (items[props.temp].state >= "18" && items[props.temp].state < "19") ? "lime": (items[props.temp].state >= "19" && items[props.temp].state < "20") ? "yellow": (items[props.temp].state >= "20" && items[props.temp].state < "22") ? "orange": (items[props.temp].state >= "22" && items[props.temp].state < "23") ? "deeporange": (items[props.temp].state >= "23" && items[props.temp].state < "24") ? "pink": (items[props.temp].state >= "24") ? "red": "white"'
- component: f7-row
config:
style:
height: auto
width: 100%
overflow: hidden
margin-bottom: 5px
slots:
default:
- component: f7-col
config:
style:
flex-wrap: nowrap
align-self: flex-end
slots:
default:
- component: f7-row
config:
class:
- justify-content-flex-start
style:
flex-wrap: nowrap
slots:
default:
- component: f7-icon
config:
f7: arrow_up_to_line
color: '=(items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "gray"'
size: 18px
- component: Label
config:
text: '=(items[props.hvac].state == "OFF") ? "OFF": items[props.targetTemp].state'
style:
margin-left: 8px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-row
config:
visible: '=(items[props.timerD].state > "0") ? "true": "false"'
style:
white-space: nowrap
flex-wrap: nowrap
height: auto
class:
- justify-content-flex-start
slots:
default:
- component: f7-icon
config:
f7: timer
size: 20px
color: blue
- component: Label
config:
text: =items[props.timerD].displayState
style:
margin-left: 6px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-block
config:
style:
width: auto
class:
- card-prevent-open
- card-content-padding
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-toggle-item
config:
title: On/Off
item: =props.hvac
icon: f7:power
iconColor: '=(items[props.hvac == "HEAT" ? "deeporange": "gray"'
actionCommand: HEAT
actionCommandAlt: OFF
- component: oh-slider-item
config:
title: Target Temperature
item: =props.targetTemp
icon: f7:arrow_up_to_line
iconColor: '=(items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "white"'
iconUseState: true
color: '=(items[props.targetTemp].state > "1" && items[props.targetTemp].state < "17") ? "blue": (items[props.targetTemp].state >= "17" && items[props.targetTemp].state < "18") ? "green": (items[props.targetTemp].state >= "18" && items[props.targetTemp].state < "19") ? "lime": (items[props.targetTemp].state >= "19" && items[props.targetTemp].state < "20") ? "yellow": (items[props.targetTemp].state >= "20" && items[props.targetTemp].state < "22") ? "orange": (items[props.targetTemp].state >= "22" && items[props.targetTemp].state < "23") ? "deeporange": (items[props.targetTemp].state >= "23" && items[props.targetTemp].state < "24") ? "pink": (items[props.targetTemp].state >= "24") ? "red": "white"'
min: 15
max: 25
label: true
scale: true
scaleSteps: 10
- component: oh-list-item
config:
title: Mode
icon: f7:app_badge
badge: =items[props.zoneOp].displayState
badge-color: '=(items[props.zoneOp].state == "SCHEDULE") ? "green" : (items[props.zoneOp].state == "UNTIL_CHANGE") ? "yellow" : (items[props.zoneOp].state == "MANUAL") ? "red" : (items[props.zoneOp].state == "TIMER") ? "blue" : "white"'
action: options
actionItem: =props.zoneOp
- component: oh-stepper-item
config:
title: Timer Duration
footer: in Minutes
item: =props.timerD
icon: f7:timer
iconUseState: true
color: blue
step: 30
fill: true
round: true
autorepeat: true
autorepeatDynamic: true
small: true