Oh-list-item icon size and divider

[Mpower (M)]

I am starting to get used to creating widgets but I can not figure out how to change some of the settings of lists.Is there a way to change the icon size and remove the dividers between each of the items?

- component: oh-list-card
                  config:
                    noBorder: true
                    outline: true
                    noShadow: true
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          fragment: false
                          for: item
                          sourceType: itemsInGroup
                          groupItem: =props.humidity
                          fetchMetadata: widgetOrder
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                icon: f7:drop
                                iconColor: '=(loop.item.state === "1")? "green" : "red"'
                                style:
                                  font-size: 10px
                                  f7-size: 2px
                                title: =loop.item.name

[JustinG]

The lines are easy. Just add noHairlinesBetween: true to the config of your list card.

The icon size is a little more difficult. The height and width of the list item icons are fixed, there is no property that gives you access to those values, so you have to resort to overriding those hardcoded values with css. In this case that means adding something like the following to the config of your list card:

stylesheet: >
  .item-media > img {
    width: 60px !important;
    height: 60px !important;
  }

if you want all the icons to be the same new size. If you want only some of the icons to change then you can add that same code to the config of any list item that needs the icon a different size.

[Mpower (M)]

thanks @JustinG , with fonz-size added it worked

- component: oh-list-card
                  config:
                    noBorder: true
                    outline: true
                    noShadow: true
                    noHairlinesBetween: true
                    stylesheet: >
                      .icon{
                        width: 14px !important;
                        height: 14px !important;
                        font-size: 14px !important;
                      }