Hi - I have a custom widget with an f7-card. When I include is part of an oh-block/oh-grid-cell, the card expands and look as expected. However, when the card is included as part of an oh-masonry, the card is “blurry” like the background. Has anyone else experienced this before?
I don’t believe this is a widget issue as I have tried with other people’s widgets and they have the same issue.
I am using Openhab 3.3.0.
Thanks
Jeff
Can you provide the code in code fences? It’s normal to be blurry from memory if your in the edit mode and not in the normal way of running a page. Also you need to set a F7 page content for the f7 card that expands.
This issue occurs when the viewing the master UI (not just in edit mode). Here’s the page code where the instantiation in the oh-block works correct, but the one in on-masonry does not.
config:
label: Scratch
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:widget_Bewaesserung_v1-3
config: {}
masonry:
- component: oh-masonry
slots:
default:
- component: widget:widget_Bewaesserung_v1-3
config: {}
grid: []
canvas: []
The sample widget I am using to test is one done in another thread:
uid: widget_Bewaesserung_v1-3
tags: []
props:
parameters: []
parameterGroups: []
timestamp: May 20, 2021, 1:07:34 PM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- card-expandable-animate-width
style:
height: 200px
width: auto
slots:
default:
- component: oh-button
config:
iconF7: gear
iconSize: 30px
color: black
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-icon
config:
material: grass
size: 80px
color: green
style:
opacity: 40%
position: absolute
top: 120px
right: 16px
- 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:
action: toggle
actionItem: Bewaesserung_Rasen_Schalter
actionCommand: ON
actionCommandAlt: OFF
class:
- card-prevent-open
style:
width: 100%
height: 100%
position: absolute
top: 0
left: 0
z-index: 0
- component: f7-block
config:
class:
- no-padding
style:
margin: 0px
height: 200px
slots:
default:
- component: f7-row
config:
style:
height: 75px
white-space: nowrap
flex-wrap: nowrap
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: Büsche hinten
style:
font-size: 25px
font-weight: 600
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-chip
config:
text: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? 'Bewässerung aktiv' : 'AUS'"
color: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? 'green' : 'gray'"
- component: f7-col
config:
style:
width: auto
slots:
default:
- component: oh-gauge
config:
min: 0
max: 90
type: semicircle
value: 40
labelText: 20 min
borderWidth: 20
size: 100
borderBgColor: "#d2d2d2"
borderColor: "#4287f5"
visible: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? true : false"
style:
margin-right: 15px
margin-top: 15px
- component: f7-row
config:
style:
white-space: nowrap
flex-wrap: nowrap
height: 30px
class:
- justify-content-flex-start
slots:
default:
- component: f7-icon
config:
f7: cloud_rain
size: 20px
color: gray
visible: "=items.Bewaesserung_Rasen_Regenautomatik.state === 'ON' ? true : false"
style:
margin-right: 5px
- component: f7-icon
config:
f7: umbrella
size: 20px
color: gray
visible: "=Number.parseInt(items.item_Netatmo_Regen_Niederschlag.displayState) >= 1 ? true : false"
style:
margin-right: 5px
- component: f7-row
config:
style:
height: 66px
width: 100%
overflow: hidden
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
width: 100%
slots:
default:
- component: f7-icon
config:
f7: alarm
size: 20px
color: blue
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-top: 0px
- component: Label
config:
text: 19. April, 18:30
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
margin-left: 5px
font-size: 14px
font-weight: 600
- component: f7-icon
config:
f7: timer
size: 20px
color: blue
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-top: 0px
margin-left: 10px
- component: Label
config:
text: 35min
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
margin-left: 5px
font-size: 14px
font-weight: 600
- component: f7-row
config:
class:
- justify-content-flex-start
style:
margin-top: 5px
flex-wrap: nowrap
slots:
default:
- component: f7-icon
config:
material: restore
color: gray
size: 18px
style:
margin-top: 0px
margin-left: 0px
- component: Label
config:
text: 14. April, 18:30
style:
margin-left: 8px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-icon
config:
f7: timer
size: 15px
color: gray
style:
margin-top: 2px
margin-left: 10px
- component: Label
config:
text: 20min
style:
margin-left: 3px
font-size: 12px
color: gray
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
style:
height: 300px
slots:
default:
- component: oh-list
config:
class:
- padding
slots:
default:
- component: oh-stepper-item
config:
title: Ausschalt Timer (min)
item: Bewaesserung_Rasen_Ausschalt_Timer
icon: f7:timer
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: Label
config:
text: =props.Title?props.Title:"Timer Settings"
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-toggle-item
config:
title: Timer
icon: f7:alarm
color: green
item: Bewaesserung_Rasen_Timer
- component: oh-input-item
config:
title: Startzeit
type: datepicker
sendButton: true
item: Bewaesserung_Rasen_Timer_Startzeit
outline: false
calendarParams:
timePicker: true
dateFormat:
month: short
day: numeric
hour: numeric
minute: numeric
style:
--f7-input-bg-color: "#ededed"
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Timer_Laufzeit
title: Laufzeit (min)
icon: f7:timer
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Interval
title: Interval (Tage)
icon: f7:arrow_2_circlepath
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: Label
config:
text: =props.Title?props.Title:"Wettersteuerung"
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-toggle-item
config:
title: Regenautomatik
icon: f7:cloud_rain
color: green
item: Bewaesserung_Rasen_Regenautomatik
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Regenautomatik_Grenzwert
title: Grenzwert Regen (mm)
icon: f7:chart_bar
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
Please use code fences, search this forum for post on how to do this. I am no expert but you have not used the f7-card-content in the correct way directly after the expandable f7 card. If you have used code fences I could have made the edit and posted back for you to try.
Hi Matt - Thanks for the help. I edited by posting with the code.
Fixing that widget would take too long due to YAML needing all the spacing changed. Try with this instead to test if it still does the same thing…
uid: ExpandableCardTest
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Aug 15, 2022, 7:46:26 PM
component: f7-card
config:
hideNavbarOnOpen: false
class: lazy no-margin
expandable: true
style:
border-radius: 6px
height: 9.6em
width: 17em
slots:
default:
- component: f7-card-content
config:
class: lazy card-opened-fade-in
style:
color: white
background-image: url("https://source.unsplash.com/category/nature")
background-size: 100% auto
background-position: center
background-repeat: no-repeat
slots:
default:
- component: oh-link
config:
class: card-prevent-open
style:
margin: 0em 0.25em 0 -0.7em
color: var(--f7-card-text-color)
opacity: 0.4
z-index: 99
visible: true
iconF7: power
iconSize: 22
round: true
action: toggle
actionItem: =props.switchItem
actionCommand: ON
actionCommandAlt: OFF
- component: oh-link
config:
visible: true
class: card-prevent-open
style:
margin: 0 0.25em
color: var(--f7-card-text-color)
opacity: 0.4
z-index: 99
iconF7: gear_alt
iconSize: 22
round: true
action: group
actionGroupPopupItem:
- component: f7-card-content
config:
class: lazy card-opened-fade-out
style:
color: white
background-image: url("https://source.unsplash.com/category/interiors")
background-size: 17rem 10rem
background-repeat: no-repeat
border-radius: 6px
slots:
default:
- component: oh-link
config:
class: card-prevent-open
style:
margin: 0em 0.25em 0 -0.7em
color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'white'"
opacity: "=(items[props.switchItem].state === 'ON') ? '1' : '0.3'"
visible: true
iconF7: power
iconSize: 22
round: true
action: toggle
actionItem: =props.switchItem
actionCommand: ON
actionCommandAlt: OFF
- component: oh-link
config:
visible: true
class: card-prevent-open
style:
margin: 0 0.25em
color: var(--f7-card-text-color)
opacity: 0.4
iconF7: gear_alt
iconSize: 22
round: true
action: group
actionGroupPopupItem:
The exact same thing happens. When the widget is installed as a component in the oh-masonry, the popup never comes to focus:
The instantiation in the oh-block appears correctly:
I have tried this on both Chrome, Safari and on with the iphone app with the same results.
config:
label: Scratch
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:ExpandableCardTest
config: {}
masonry:
- component: oh-masonry
slots:
default:
- component: widget:ExpandableCardTest
config: {}
grid: []
canvas: []
This appears to be a z-index issue in the ui page implementation and nothing to do with the widget itself. If I look at the html that is generated, the top oh-block (which works correctly) is enclosed in a <div style=“z-index:5000”>, however there is no z-index set for the enclosing block which encloses the oh-masonry-item. If I edit the html and add a z-index to the <div class=“block”> line, things works correctly. I will submit as an issue to the ui developers.
Hi @jsjames , did you submit a github issue? I discovered now the same problem and want to keep track of it - thanks!
Yes, I actually submitted a PR to fix the issues as well - Fix z-index of oh-masonry component (#1466) by jsjames · Pull Request #1472 · openhab/openhab-webui · GitHub
Amazing, thank you!
