Oh-repeater and oh-masonry

Hello Community!

This is my first post here, sorry if not everything is up to the guidelines.

I am trying to use oh-repeater in an oh-masonry layout, for responsiveness. The child component is a custom widget based on f7-card. I set the fragment to true in the oh-repeater options, but the cards are placed one below the other, even on a desktop, not in a responsive manner, like they would if I would add the widgets one-by-one, without the repeater. Any ideas how I could make it to be responsive?

Here is a snippet from the page config:

  - component: oh-masonry
    slots:
      default:
        - component: oh-repeater
          config:
            for: index
            sourceType: range
            rangeStart: 1
            rangeStop: 26
            rangeStep: 1
            fragment: true
          slots:
            default:
              - component: widget:sprinkler_valve_settings
                config:
                  item: ="Arduino_Controller_Relay" + (loop.index + 2)
                  title: =loop.index + ". zona"
                  duration: ="ValveTimer_" + loop.index

and here is the widget

uid: sprinkler_valve_settings
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Valve relay
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: Valve timer
      label: Time duration item
      name: duration
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 31, 2022, 8:01:23 PM
component: f7-card
config:
  title: '=(props.title) ? props.title : "Set the title"'
  style:
    justify-content: space-between
    align-content: space-between
    padding: 5px
slots:
  default:
    - component: oh-button
      config:
        large: true
        text: '=(items[props.item].state == "ON") ? "Stop" : "Start"'
        color: '=(items[props.item].state == "ON") ? "red" : "green"'
        fill: true
        action: toggle
        actionItem: =props.item
        actionCommand: ON
        actionCommandAlt: OFF
    - component: f7-row
      config:
        style:
          padding-top: 5px
          padding-bottom: 5px
      slots:
        default:
          - component: Label
            config:
              text: Automatic
          - component: oh-toggle
            config:
              color: green
    - component: f7-row
      config:
        class:
          - text-align-center
        style:
          padding-bottom: 5px
      slots:
        default:
          - component: Label
            config:
              text: Ido
          - component: oh-stepper
            config:
              fill: true
              min: 1
              max: 60
              raised: true
              large: true
              item: =props.duration
    - component: f7-row
      slots:
        default:
          - component: Label
            config:
              text: Current State
          - component: Label
            config:
              text: =(items[props.item].state)

Greetings,
ZK

I don’t think there’s a way to make this work directly. Because of the way the masonry works, the repeater’s list is always constrained to one of the masonry segments.

Check out my Dynamic favorites widget to see how I accomplished something similar by putting the repeater in a widget as a child of an f7-block which permitted better control of the responsiveness of the cards. Then you just add the widget to a page as part of its own block, not masonry, which makes the widget one large column across the whole page.

  - component: oh-block
    config:
      title: Favorites Quick Access
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:widget_favorite_grid
                      config: {}