Hi everyone,
I’m facing an issue where a widget in my application renders differently after closing it. Initially, it appears as expected, but when I reopen it, the layout or style changes unexpectedly.
Here’s what it looks like when it’s initially opened:
And here’s how it looks after closing:
I’ve checked for obvious issues like CSS conflicts, state management problems, and browser-specific behavior, but I can’t pinpoint the cause.
Has anyone experienced this before? Any advice on where I might look or debug further would be greatly appreciated!
here is my yaml code
uid: Cell_Wallplugnew
tags: []
props:
parameters:
- context: item
description: A actual power item to display
label: Item
name: itemActualPower
required: false
type: TEXT
- context: item
description: A total power item to display
label: Item
name: itemTotalePower
required: false
type: TEXT
- context: item
description: A daily total power item to display
label: Item
name: itemDailyTotalPower
required: false
type: TEXT
- context: item
description: the switch state
label: Item
name: itemSwitch
required: false
type: TEXT
- description: URL to show in the frame
label: Source URL
name: URL
required: true
type: TEXT
- default: from=now-6h&to=now;6h,from=now-12h&to=now;12h,from=now-1d&to=now;24h,from=now/d&to=now/d;Day,from=now-3d&to=now;Last
3 Days,from=now-7d&to=now;Last 7 Days,from=now-14d&to=now;Last 14 Days
description: Comma-separated List of options. Example
"from=now-6h&to=now;-6h,from=now-1d/d&to=now-1d/d;yesterday" for past
"6h" and "yesterday". First entry is default.
label: Time range options
name: timerange
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 20, 2024, 1:34:34 PM
component: f7-card
config:
expandable: true
style:
--f7-card-expandable-tablet-height: 75vh
--f7-card-expandable-tablet-width: 35vw
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 150px
margin-left: 5px
margin-right: 5px
margin-top: 10px
noShadow: false
padding: 0px
swipeToClose: true
slots:
default:
- component: f7-card-content
config:
style:
background-color: yellow
margin: 0 0 0 0
padding: 0 0 0 0
width: 100%
slots:
default:
- component: f7-row
config:
class:
- align-items-center
style:
background-color: "#f0f0f0"
flex-wrap: nowrap
font-size: 18px
font-weight: bold
height: 20px
margin: 0 0 0 0
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
text-align: center
width: 80%
slots:
default:
- component: Label
config:
text: Card Header
- component: f7-col
config:
style:
width: 20%
slots:
default:
- component: oh-button
config:
color: black
iconF7: expand
iconSize: 20px
style:
background-color: white
text-align: right
- component: f7-row
config:
class:
- justify-content-center
style:
font-size: 16px
margin: 0 0 0 0
padding: 0 0 0 0
slots:
default:
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
outline: false
style:
background-color: white
height: 130px
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
width: 100%
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 80%
slots:
default:
- component: f7-row
config:
style:
background-color: white
height: 30%
width: 42%
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: 600
text: steckdose
- component: f7-row
config:
style:
background-color: white
height: 20%
width: 42%
slots:
default:
- component: f7-chip
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: =props.itemSwitch
color: "=(items[props.itemSwitch].state === 'ON') ? 'green' : 'red'"
text: "=(items[props.itemSwitch].state === 'ON') ? 'AN' : 'AUS'"
- component: f7-row
config:
style:
background-color: blue
flex-wrap: nowrap
height: 20%
width: 12em
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 50%
slots:
default:
- component: f7-row
config:
style:
background-color: blue
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 25%
slots:
default:
- component: f7-icon
config:
color: blue
f7: chart_bar
size: 20px
style:
margin-left: 0px
margin-top: 0px
visible: true
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 75%
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 600
margin-left: 5px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: 234,4W
visible: true
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
margin: 0px 0px 0px 0px
width: 50%
slots:
default:
- component: f7-row
config:
style:
background-color: blue
flex-wrap: nowrap
height: 100%
width: 100%
slots:
default:
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 20%
slots:
default:
- component: f7-icon
config:
color: blue
f7: chart_bar_circle
size: 20px
style:
margin-top: 0px
visible: true
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 80%
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 600
margin-left: 5px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: ='234,4kWh'
visible: true
- component: f7-row
config:
style:
background-color: blue
height: 30%
width: 10em
slots:
default:
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 20%
slots:
default:
- component: f7-icon
config:
color: gray
f7: chart_bar_square_fill
size: 15px
style:
margin-left: 10px
margin-top: 0px
- component: f7-col
config:
style:
background-color: white
flex-wrap: nowrap
height: 100%
width: 80%
slots:
default:
- component: Label
config:
style:
color: gray
font-size: 12px
margin-left: 0px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: =(Number.parseFloat(items[props.itemTotalePower].state)).toFixed(1) +
'kWh'
- component: f7-col
config:
style:
background-color: white
height: 100%
width: 20%
slots:
default:
- component: oh-icon
config:
height: 60%
icon: poweroutlet
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
outline: false
style:
width: 100%
slots:
default:
- component: f7-list
config: {}
slots:
default:
- component: oh-toggle-item
config:
color: green
icon: oh:poweroutlet
item: =props.itemSwitch
title: Steckdose
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar_circle
item: =props.itemDailyTotalPower
title: Daily Totayl Power
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar
item: =props.itemActualPower
title: Actual Power
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar_square_fill
item: =props.itemTotalePower
title: Totale Power
- component: oh-webframe-card
config:
borders: false
class:
- display-block
height: 240px
noBorder: false
noShadow: true
src: =props.URL.replace('{period}', vars.selectedPeriod ||
[props.timerange.split(',')[0].split(';')[0]])
- component: f7-segmented
config:
class:
- padding-bottom-half
outline: false
round: false
style:
--f7-button-border-radius: 4px
--f7-button-font-size: 14px
--f7-button-font-weight: 300
--f7-button-outline-border-width: 1px
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-text-transform: none
margin-left: 10px
margin-right: 10px
margin-top: 250px
slots:
default:
- component: oh-repeater
config:
for: size
fragment: true
sourceType: range
slots:
default:
- component: oh-repeater
config:
for: period
fragment: true
in: =[props.timerange.split(",")[loop.size].split(";")[1]]
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] ==
vars.selectedPeriod) ||
(props.timerange.split(',')[0].sp\
lit(';')[1] === loop.period) &&
!vars.selectedPeriod) ? true :
false"
outline: true
round: false
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
text: =loop.period
Thank you in advance!
