Help styling f7-card with repeater

Setup, Configuration and Use Widgets
1

Hi,
I need help changing the style of a card with a repeater inside.
This is the code of the custom widget:

uid: Styled Row
tags: []
props:
  parameters:
    - default: Styled Row with repeater
      description: "Default: 'Styled Row with repeater'"
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      default: Iterate
      description: Items to iterate
      label: Groups of items to iterate
      name: iterate
      required: true
      type: TEXT
    - description: Card background color. Hex or RGBA.
      label: Background color
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 10, 2023, 12:09:10 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    noShadow: false
  title: =props.title
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-list
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: i
                          groupItem: =props.iterate
                          sourceType: itemsInGroup
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                icon: f7:app
                                iconColor: green
                                item: =loop.i.name
                                title: =loop.i.label

There are some things I’d like to change but I don’t know how. This is how the widget looks in a computer:
image
And this is how it looks in an iPhone:

image
image968×882 37.2 KB

  • As you can see, the card title is bold in the computer but not in iOS. How can I make it bold in iOS?
  • How can I remove the line between the title and the content of the card?
  • How can I remove the lines between the repeater items?
  • How can I increase the left padding of the repeater items?

Thank you.

2

The title and line questions come from the the default f7 styles of the base components, so you should be able to find the answers in the f7 doc: hairlines and iOS card styles

In nearly all cases, css can be added to components using the style config. So you could just set a padding-left value:

- component: oh-list-item
  config:
    style:
      padding-left: 10px
3

Thank you, the padding works perfectly, but I haven’t maged to remove the hairlines or make the title bold in iOS.
If I add “font-weight: var(–f7-card-header-font-weight)” to the style section of the f7-card all the card becomes bold. Where should I add it?
And for the hairlines, I tried to add the class “no-hairline” to the f7-card but it makes no difference.
Regards.

4

Right, that’s how css works. When you specify a value for a property all children of that element inherit that property value unless something else explicitly set a new value. So if you just set font-weight on the card then every child of the card that doesn’t have its own definition for font-weight will get that one. It doesn’t say so on the card css docs, but it’s possible that in iOS the default value for –f7-card-header-font-weight is different than on the other platforms. Try just explicitly overwriting that variable in the card style to eradicate the iOS specific default.

--f7-card-header-font-weight: 700

That’s odd. That class should work for cards. I wonder why it’s not working. Anyway, you can also try to add to the card style:

--f7-card-header-border-color: transparent
--f7-list-item-border-color: transparent
5

Perfect! Once again: THANK YOU!!!

6

Hi,
I’m again stuck with more or less the same.
Thist time I have an oh-list-card instead of a f7-card but again on a computer the title is bold and on iOS it isn’t.
Reviewing Cards | Framework7 Documentation I think it is the expected behaviour, as .ios doesn’t specify “–f7-card-header-font-weight: bold;” as .aurora does. Is this correct?
I’ve tried all my CSS but I coudn’t get the list header bold on iOS. Help, please!

7

The oh-list-card is one of the special cases. In this case, the style property isn’t actually read so you can’t set css or css variables that way. In order to apply css to the header in the oh-list-card you have to use the more direct option of the stylesheet property which allows you to inject css directly into the page at the location of that element. So in this case you would want something like this:

- component: oh-list-card
  config:
    title: List Card
    stylesheet: >
      .card-header {
        font-weight: bold;
      }
8

Thank you!!!