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