[SOLVED] Remove Padding in f7-list Elements

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:
image

In order to remove the padding, i would need to set the padding for the item-content (green box in the screenshot)
image

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
image

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:
image

which would be the following representation in HTML:
image

I hope i made my goal clear :wink: If not, please tell me so I can describe it a better.

Br
Sascha

Check out using stylesheets within the widgets to get that finer grain control you’re looking for:

1 Like

Thanks a lot - i will have a look into that. Sounds very promising :smiley:

Edit: It works, thanks!!

FTR, here’s my code:

 - component: f7-list-item
                  config:
                    title: =loop.item.label
                    badge: =loop.item.state
                    style:
                      color: "#666666"
                    stylesheet: |
                      .item-content{
                        padding-top: 0px;
                        padding-bottom: 0px;
                      }