OpenHAB 3.2.0
I’m currently developing a widget (f7-card) that displays the current status of all items within a group.
Therefore, i’m using a f7-list and an oh-repeater populates the list items (type oh-list-item).
The f7 card should have a fixed height and if the list is longer, i’m trying to make it scrollable using
overflow-y: scroll
my problem is, that the list always is outside of the height boundaries of th f7-card, and i don’t have any idea how to solve this (except giving the list a fixed height in pixels which i want to avoid):
i’ve tried to find the correct parameter in using the development tools in my browser, but can’t find the correct property which i would need to set. Does anybody have any ideas here?
Here’s the code of the list:
uid: Presence
tags: []
props:
parameters:
- description: Title of the widget
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item that represents the presence group
label: presence group
name: group
required: false
type: TEXT
timestamp: Jan 17, 2022, 9:09:16 PM
component: f7-card
config:
style:
background-color: white
border-radius: 15px
box-shadow: var(--f7-card-expandable-box-shadow)
min-height: 170px
max-height: 170px
background-image: url(/static/person.png)
background-position: right
background-size: contain
background-repeat: no-repeat
class:
- label-card-content
slots:
header:
- component: oh-link
config:
action: group
actionGroupPopupItem: =props.group
text: =props.title
style:
color: "#666666"
content:
- component: f7-list
config:
class:
- align-items-left
style:
overflow-y: scroll
slots:
default:
- component: oh-repeater
config:
for: item
groupItem: =props.group
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
title: =loop.item.label
badge: =items[loop.item.name].displayState || items[loop.item.name].state
action: analyzer
actionAnalyzerItems: =[loop.item.name]
style:
color: "#666666"
stylesheet: >
.item-content{
padding-top: 0px;
padding-bottom: 0px;
}
footer:
- component: f7-row
config:
style:
width: -webkit-fill-available
slots: {}