[Cutom Widget] Can't get rid of padding

Setup, Configuration and Use Widgets
, ,
1

Hi all,

I’m a little bit struggeling with custom main-ui widget for controlling my KNX-based heating. The widget is working and can be controlled as intended, but I have a layout issue I can’t fix.

  1. How is the widget working
  • It show’s the current temperature as item value
  • Additional information is in title and subtitle
  • On click a popup open the select the heating mode
  • plus there is an “advanced” button which opens a popup card widget for further heating related settings
    image
    image666×249 17.2 KB
  1. Basic structure of the widget
  • Main list item is a f7-list with media-list option enabled
  • as child slots it contains under default an oh-label-item for the actual list view and a f7-popover
  • code snippet see below
component: f7-list
config:
  media-list: true
slots:
  default:
    - component: oh-label-item
      config:
        action: popover
        icon: iconify:mdi:home-thermometer
        iconColor: '=(items[props.item_ventil].state == "OPEN") ? "red" :
          (themeOptions.dark === "light" ? "black" : "white")'
        item: =props.item_ist
        popoverOpen: ="."+props.item_mode
        subtitle: '= "Soll: " + items[props.item_mode].displayState + " = " +
          items[props.item_soll].state '
        title: =props.titel
        style:
          padding-left: 0px
    - component: f7-popover
      [...]
  1. The issue
  • There is a padding of 32 pixels on the level of the oh-label-item which leads to a waste of space and unaligned layout compared to standard list items
  • I tried to remove the padding with a style statement in the config section of the oh-label-item which seems not to work
  • removing the padding with browser-css-tools leads to the expected layout

image
image1111×636 165 KB

Any ideas how to fix this? What am I missing?
Thanks,
Sebastian

2

You’ve run across a somewhat unusual configuration it looks like. The problem comes up because this list widget you are creating is itself nested in some other list (note the css selector that contains two ul tags: .item ul ul). In this case f7 adds the extra padding variable assuming that you want some visual indication of that nested relationship.

Adding styling to the label item isn’t going to impact this. As your dev tools image shows, the problematic css directive is actually on the ul element that is the parent of the list item. You have no style object that will apply directly to that element (style object on the f7 list applies to the div parent of the ul), so to change that directive manually would require using a stylesheet that would cascade down from the list to the ul.

Fortunately, there’s an easier way here. What’s being added by the f7 library is the additional --f7-list-in-list-padding-left variable. And that you can override the value of that variable in the list style to get rid of that additional space:

component: f7-list
config:
  media-list: true
  style:
    --f7-list-in-list-padding-left: 0
slots:
  default:
    - component: oh-label-item
      config:
...
1 Like
3

Thanks for your suggestion Justin. I will gige it a try as soon as I have time the next weekend and report back

4

Works perfect :partying_face: