Hi all,
I’m currently writing a small card, that shows me the state of all items which are part of a presence group. The problem is, that the padding around the individual f7-list items is quite big (16px), and I don’t see a way to remove it. Currently it looks like this:
In order to remove the padding, i would need to set the padding for the item-content (green box in the screenshot)
but within yaml, i don’t know how to access the item-content. I can only change the f7-list or the f7-list-item, but i would need to change the div with the item-content class to modify the padding. The following screenshot shows the HTML code and the f7 components
For reference, here’s my widget (i do have a oh-repeater bthat enqueues the list items into the list, maybe that’s the problem?)
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 6, 2022, 11:55:39 PM
component: f7-card
config:
style:
background-color: white
border-radius: 15px
box-shadow: var(--f7-card-expandable-box-shadow)
min-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
slots:
default:
- component: oh-repeater
config:
for: item
groupItem: =props.group
sourceType: itemsInGroup
slots:
default:
- component: f7-list-item
config:
title: =loop.item.label
badge: =loop.item.state
style:
color: "#666666"
footer:
- component: f7-row
config:
style:
width: -webkit-fill-available
slots: {}
Ideally i’d like to remove the top/bottom padding, so that it looks like:
which would be the following representation in HTML:
I hope i made my goal clear If not, please tell me so I can describe it a better.
Br
Sascha