OH4: f7-list - item separator not always shown

Setup, Configuration and Use Migration
,
1

Hi All

I am using an f7-list with a mix of member components to make up the list and it appears that there is inconsistency in the way the result is rendered when using the different components. Sometime there is a separator line between each member of the list, sometime a partial line and sometimes no line at all:

Even with a oh-list-item with or without an icon the result differs.

image

I have setup the following to demonstrate what I am seeing:

uid: AAA_Test_List_Separator
tags: []
props:
  parameterGroups: []
timestamp: May 12, 2023, 11:07:30 AM
component: f7-block
config:
  style:
    width: 300px
    heigth: 600px
    border: 1px solid black
slots:
  default:
    - component: f7-list
      config:
        virtualList: true
      slots:
        default:
          - component: oh-button
            config:
              style:
              text: Sample Text - Button
              iconF7: lightbulb
          - component: oh-button
            config:
              style:
              text: Sample Text - Button
              iconF7: lightbulb
          - component: oh-button
            config:
              style:
              text: Sample Text - Button
              iconF7: lightbulb
          - component: oh-list-item
            config:
              icon: f7:person_circle
              title: Sample Text - Icon             
          - component: oh-list-item
            config:
              icon: f7:person_circle
              title: Sample Text - Icon 
          - component: oh-list-item
            config:
              icon: f7:person_circle
              title: Sample Text - Icon 
          - component: oh-list-item
            config:
              title: Sample Text
          - component: oh-list-item
            config:
              title: Sample Text        
          - component: oh-list-item
            config:
              title: Sample Text

Is there any way to either completely remove the separator line or get it to display across the entire list width so that the list looks consistent?

Thanks
Mark

2

On the f7-list itself, set noHairlinesBetween to true.

1 Like
3

Thanks Justin. That gets me most of the way there:

image

Just the tope and bottom still there. But using noHairlines seems to work.

EDIT - actually had to use both to get rid of all of them :slight_smile:

You are a star