Individual width and position inside an f7-list-item

Add-ons UIs
1

How can I add multiple components to an f7-list-item and keep control of position and width of those components?
If I use slots like title, text, header, after or even the extended slots like content-start, inner, after-start I cannot control the width and position of an item.
Even when using f7-list-item-row&cell I cannot assign my individual width to the components.
Any idea?

2

I’m not sure I follow. It is possible to assign widths to children of an f7-list-item-row and an f7-list-item.

component: oh-list-card
config:
slots:
  default:
    - component: f7-list-item-row
      config:
        id: basic-row
      slots:
        default:
          - component: oh-button
            config:
              text: Short
              fill: true
              style:
                width: 100px
          - component: oh-button
            config:
              text: Medium
              fill: true
              style:
                width: 200px
          - component: oh-button
            config:
              text: Long
              fill: true
              style:
                width: 300px
    - component: f7-list-item
      config:
        id: basic-item
      slots:
        default:
          - component: oh-button
            config:
              text: Short
              fill: true
              style:
                width: 100px
          - component: oh-button
            config:
              text: Medium
              fill: true
              style:
                width: 200px
          - component: oh-button
            config:
              text: Long
              fill: true
              style:
                width: 300px

image

Can you post an example of what’s not working?

1 Like
3

Yes, you did :slight_smile:
With your example I see that I was trying to do it too complicated .

Many thanks. That solved my problem!