Hi all,
I observe a strange behaviour. I made a little widget for some room conditions.
In the widget editor, the preview works perfectly. It is about vertical alignment of the f7-row inside the f7-list-item.
The issue can be seen if I increase the f7-list-item-min-height (for demonstration purpose to 100px). The expected behaviour is: the content is vertically aligned inside the list item.
This works for the editor preview, but when using this widget in the fixed canvas environment, the vertical alignment is ignored. (You can see this on the screenshots attached).
I tried a lot with “align-items: center” and stylesheets for all elements (f7-card, f7-list, f7-row, f7-list-item). Everything is well ignored.
The development tools tells me:
This element is a flex item, i.e. a child of a flex container, but align-items only applies to containers.
Try setting the align-items on the container element or use align-self instead.
Any idea how to fix is? I can work around this with height and paddings, but that’s not the preferred solution.
Thank you!
Jan
uid: Raumtemperatur_backup
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Jan 2, 2025, 3:58:43 PM
component: f7-card
config:
title: Raumtemperatur
slots:
default:
- component: f7-list
config:
style:
--f7-list-font-size: 16px
--f7-list-item-min-height: 100px
slots:
default:
- component: f7-list-item
config:
style:
box-shadow: none
margin-left: 0
margin-right: 0
--f7-list-item-padding-vertical: 0px
background: '=(Number.parseFloat(items.ShellyHTSauna_Luftfeuchtigkeit.state) >
60 ) ? "#FF8585" : ""'
stylesheet: |
.item-inner {
display: inline-block;
}
slots:
inner-start:
- component: f7-row
config:
style:
justify-content: space-between
align-items: center
slots:
default:
- component: f7-col
config:
style:
text-align: left
width: 25
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: bedroom
width: 30
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 40
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: temperature
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =items.ShellyHTSauna_Temperatur.state
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 35
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-end
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: humidity
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =Math.round(Number.parseFloat(items.ShellyHTSauna_Luftfeuchtigkeit.state))+
" %"
- component: f7-list-item
config:
style:
box-shadow: none
margin-left: 0
margin-right: 0
--f7-list-item-padding-vertical: 0px
background: '=(Number.parseFloat(items.ShellyHTBad_Luftfeuchtigkeit.state) > 60
) ? "#FF8585" : ""'
stylesheet: |
.item-inner {
display: inline-block;
}
slots:
inner-start:
- component: f7-row
config:
style:
justify-content: space-between
align-items: center
slots:
default:
- component: f7-col
config:
style:
text-align: left
width: 25
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: bath
width: 30
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 40
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: temperature
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =items.ShellyHTBad_Temperatur.state
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 35
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-end
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: humidity
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =Math.round(Number.parseFloat(items.ShellyHTBad_Luftfeuchtigkeit.state))
+" %"
- component: f7-list-item
config:
style:
box-shadow: none
margin-left: 0
margin-right: 0
--f7-list-item-padding-vertical: 0px
background: '=(Number.parseFloat(items.Shelly_HT_HWR_Luftfeuchtigkeit.state) >
60 ) ? "#FF8585" : ""'
stylesheet: |
.item-inner {
display: inline-block;
}
slots:
inner-start:
- component: f7-row
config:
style:
justify-content: space-between
align-items: center
slots:
default:
- component: f7-col
config:
style:
text-align: left
width: 25
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: cellar
width: 30
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 40
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: temperature
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =items.Shelly_HT_HWR_Temperatur.state
- component: f7-col
config:
style:
text-align: right
vertical-align: middle
width: 35
slots:
default:
- component: f7-row
config:
style:
align-items: center
justify-content: flex-end
slots:
default:
- component: oh-icon
config:
style:
vertical-align: middle
icon: humidity
width: 16
- component: Label
config:
style:
margin-left: 5px
text: =Math.round(Number.parseFloat(items.Shelly_HT_HWR_Luftfeuchtigkeit.state))
+ " %"
)