Hi All
I have just updated to OH 5.1.0, and am pertty sure this is a new issue, however can’t be 100% sure.
I have a widget that should look like:
However it is opening like:
This only happens on some devices (Chrome on PC, iPhone and Tablet.
However on my Andrpoid device opens correctly
Code is as follows:
component: oh-cell
config:
on: true
title: Security Controls
slots:
background:
- component: f7-block
config:
style:
--cell-green: rgba(165,236,176,255)
--cell-red: rgba(255,156,151,255)
background-color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "OFF") ? "var(--cell-red)"
:(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state ===
"OFF") ?
"var(--cell-red)":(items.Shelly_UNI_Garage_ElectricFence_State.state
=== "OFF") ?
"var(--cell-red)":(items.ShellyUNI_Doorbell_Overide.state === "OFF")
?
"var(--cell-red)":(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state)
> 2) ? "var(--cell-red)" : "var(--cell-green)"'
height: 100%
margin: 0
padding: 0
position: absolute
width: 100%
- component: f7-block
config:
style:
bottom: 5px
left: 0px
margin: 0
padding: 0
position: absolute
width: 100%
slots:
default:
- component: oh-button
config:
popupOpen: .security-pop
style:
height: 100%
width: 100%
text: OPEN
- component: f7-popup
config:
class: security-pop
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background-color: rgb(220,220,220)
border-radius: 30px
height: 720px
text-overflow: ellipsis
width: 360px
slots:
default:
- component: f7-block
config:
popupClose: .security-pop
style:
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
background-color: rgb(220,220,220)
border-radius: 30px
height: 720px
position: absolute
text-overflow: ellipsis
width: 360px
slots:
default:
- component: oh-button
config:
clearVariable:
- ZZZ
large: true
popupClose: .modal-in
style:
background: rgb(220,220,220)
color: white
display: flex
height: 30px
justify-content: center
left: 5px
position: absolute
top: 5px
width: 30px
z-index: 999
slots:
default:
- component: f7-icon
config:
color: white
f7: clear_fill
style:
color: black
font-size: 20px
margin: auto
- component: Label
config:
style:
font-size: 25px
font-weight: 500
padding-left: 80px
width: 100%
text: Security Controls
- component: f7-block
config:
style:
--f7-popup-tablet-height: 300px
--f7-popup-tablet-width: 326px
background-color: rgba(232,232,232)
border: 1px solid black
border-radius: 10px
left: 17px
margin: 0
padding: 0
position: absolute
width: 326px
slots:
default:
- component: f7-list
config:
noHairlines: true
noHairlinesBetween: true
style:
background-color: rgba(232,232,232)
slots:
default:
- component: oh-toggle-item
config:
color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state ===
"OFF") ? "red" :
(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "ON") ? "green" : "yellow"'
icon: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state ===
"OFF") ? "oh:door-open" :
(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "ON") ? "oh:door-closed" : "oh:alarm"'
iconColor: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "OFF") ? "red" :
(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "ON") ? "green" : "yellow"'
item: ShellyGarageDoorshelly1a4cf12f486ac10163199232_Power
style:
background-color: rgba(232,232,232)
title: Garage
slots:
after:
- component: Label
config:
style:
color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state ===
"OFF") ? "red" :
(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state
=== "ON") ? "green" : "yellow"'
font-weight: 500
line-height: 20px
padding-right: 20px
text: =(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.displayState)
- component: oh-toggle-item
config:
color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF")
? "red" :
(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state
=== "ON") ? "green" : "yellow"'
icon: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ?
"oh:door-open" :
(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state
=== "ON") ? "oh:door-closed" : "oh:alarm"'
iconColor: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state ===
"OFF") ? "red" :
(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state
=== "ON") ? "green" : "yellow"'
item: ShellyGateshelly1a4cf12f41d5e10163199231_Power
style:
background-color: rgba(232,232,232)
title: Gate
slots:
after:
- component: Label
config:
style:
color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF")
? "red" :
(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state
=== "ON") ? "green" : "yellow"'
font-weight: 500
line-height: 20px
padding-right: 20px
text: =(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.displayState)
- component: oh-toggle-item
config:
color: '=(items.Shelly_UNI_Garage_ElectricFence_State.state === "OFF") ? "red" :
(items.Shelly_UNI_Garage_ElectricFence_State.state
=== "ON") ? "green" : "yellow"'
icon: '=(items.Shelly_UNI_Garage_ElectricFence_State.state === "OFF") ?
"OH:shelly_fence_off" :
(items.Shelly_UNI_Garage_ElectricFence_State.state
=== "ON") ? "OH:shelly_fence_on" : "oh:alarm"'
iconColor: '=(items.Shelly_UNI_Garage_ElectricFence_State.state === "OFF") ?
"red" :
(items.Shelly_UNI_Garage_ElectricFence_State.state
=== "ON") ? "green" : "yellow"'
item: Shelly_UNI_Garage_ElectricFence
style:
background-color: rgba(232,232,232)
title: Electric Fence
slots:
after:
- component: Label
config:
style:
color: '=(items.Shelly_UNI_Garage_ElectricFence_State.state === "OFF") ? "red" :
(items.Shelly_UNI_Garage_ElectricFence_State.state
=== "ON") ? "green" : "yellow"'
font-weight: 500
line-height: 20px
padding-right: 20px
text: =(items.Shelly_UNI_Garage_ElectricFence_State.state)
- component: oh-toggle-item
config:
color: '=(items.ShellyUNI_Doorbell_Overide.state === "OFF") ? "red" :
(items.ShellyUNI_Doorbell_Overide.state ===
"ON") ? "green" : "yellow"'
icon: '=(items.ShellyUNI_Doorbell_Overide.state === "OFF") ? "f7:bell_slash" :
(items.ShellyUNI_Doorbell_Overide.state ===
"ON") ? "f7:bell" : "oh:alarm"'
iconColor: '=(items.ShellyUNI_Doorbell_Overide.state === "OFF") ? "red" :
(items.ShellyUNI_Doorbell_Overide.state ===
"ON") ? "green" : "yellow"'
item: ShellyUNI_Doorbell_Overide
style:
background-color: rgba(232,232,232)
title: Door Bell
slots:
after:
- component: Label
config:
style:
color: '=(items.ShellyUNI_Doorbell_Overide.state === "OFF") ? "red" :
(items.ShellyUNI_Doorbell_Overide.state
=== "ON") ? "green" : "yellow"'
font-weight: 500
line-height: 20px
padding-right: 20px
text: =(items.ShellyUNI_Doorbell_Overide.state)
- component: oh-list-item
config:
color: '=(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state) > 2) ? "red" :
(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state)
<= 2) ? "green" : "yellow"'
icon: '=(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state) > 2) ?
"f7:clock_fill" :
(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state)
<= 2) ? "f7:clock" : "oh:alarm"'
iconColor: '=(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state) > 2) ? "red"
:
(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state)
<= 2) ? "green" : "yellow"'
style:
background-color: rgba(232,232,232)
title: SunSynk Time Difference
slots:
after:
- component: Label
config:
style:
color: '=(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state) > 2) ? "red" :
(Number.parseFloat(items.SunSynk_Time_Diff_Mins.state)
<= 2) ? "green" : "yellow"'
font-weight: 500
line-height: 20px
padding-right: 20px
text: =items.SunSynk_Time_Diff_Mins.displayState
Not sure what the cause is as it has always worked before on all devices.
Can only suspect that the
--f7-popup-tablet-height: 720px
--f7-popup-tablet-width: 360px
Might be doing something?
ANy suggestions would be appreciated
Mark
EDIT: Also seeing these errors:
