Adding css property to OH-Repeater

Setup, Configuration and Use Widgets
1

Hi,
I’m working with layouts on custom widget’s. Specifically I’ try to have a set of elements allingned in a row.

Example of what I’ try

uid: widget_flex_block
tags:
  - test
props:
  parameters:
    - default: fals
      description: Display row
      label: as Row
      name: fdir
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Jan 28, 2024, 10:45:07 AM
component: f7-card
config:
  title: test widget
slots:
  content:
    - component: div
      config:
        class: flex-container
        style:
          min-heigth: 100px
          display: flex
          flex-direction: '=(props.fdir == true) ? "row" : "column"'
          flex-wrap: wrap
      slots:
        default:
          - component: div
            config:
              class: flex-item
              content: 1
              style:
                background-color: pink
                min-width: 50px
                min-height: 50px
                text-align: center
          - component: div
            config:
              class: flex-item
              content: 2
              style:
                background-color: lightgreen
                min-width: 50px
                min-height: 50px
                text-align: center
          - component: div
            config:
              class: flex-item
              content: 3
              style:
                background-color: lightblue
                min-width: 50px
                min-height: 50px
                text-align: center

The above example is working but not practicall. That is why I’ try to use the OH-REPEATER to achive the same layout.

The Problem: oh-repeater creates a div element that can not be styled as other components. So my question is:

  • Is the code below wrong?
  • can it be done in any other way
uid: widget_repeater_block
tags:
  - test
props:
  parameters:
    - default: fals
      description: Display row
      label: as Row
      name: fdir
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Jan 28, 2024, 11:24:49 AM
component: f7-card
config:
  title: test widget
slots:
  content:
    - component: div
      config:
        class: flex-container
        style:
          min-heigth: 100px
          display: flex
          flex-direction: '=(props.fdir == true) ? "row" : "column"'
          flex-wrap: wrap
      slots:
        default:
          - component: oh-repeater
            config:
              class: repeater-element
              for: element
              sourceType: range
              rangeStart: 1
              rangeStop: 5
              style:
                flex-direction: '=(props.fdir == true) ? "row" : "column"'
            slots:
              default:
                - component: div
                  config:
                    class: flex-item
                    content: =loop.element_idx
                    style:
                      background-color: lightblue
                      min-width: 50px
                      min-height: 50px
                      text-align: center

grafik
grafik1091×177 16.7 KB

Tis is where my problem lays, the repeater creates a div element that can not be styled, even the class atribute can not be set.

is this a bug, done so by design, or do I’ miss somthing?

thanks
Ernst

2

To my understanding the repeater and resulting html code does exactly what you instructed.
You are looping over a div element with a lightblue background.
If you want different colors you need to link the background color to a repeating parameter such as element_idx or an array element.
Not sure what you want to achieve. If it is just about different colors then define an array of colorcodes in the repeater definition:

    - component: oh-repeater
      config:
        for: element
        fragment: true
        in:
          - rLabel: This is green
            rBackground: green
          - rLabel: This is blue
            rBackground: blue
          - rLabel: This is black
            rBackground: black
        sourceType: array
      slots:
        default:
          - component: oh-button
            config:
              text: =loop.element.rLabel
              style:
                --f7-button-bg-color: =loop.element.rBackground

image
image1000×252 7.21 KB

3

Thank you for the replay.

I’ want the buttons in a row (left to right) and not as column (beneth each other). The color is just to visualize the div elements.

The use case is to create a repeater for itemsInGroup where the items are in a row “flex-direction: row” untill the row is full and then wrap around “flex-wrap: wrap”.

To do so I’ need some css styling

     - component: oh-repeater
       config:
         class: repeater-element
         for: element
         sourceType: range
         rangeStart: 1
         rangeStop: 5
     style:
       display: flex
       flex-direction: row
       flex-wrap: wrap

My problem is, how to add the style to the oh-repeater. the quote above is what works with other component, but oh-repeater does not add the stiles to the div element as excpected.

thanks
Ernst

4

There are several different ways of handling this which are covered by the options near the bottom of the repeater’s doc page:

There are three options for how the repeater wraps the child elements: 1) in a <div> (default), 2) in a <ul> (if you set the listContainer property), and 3) with no container at all (if you set the fragment property).

I tend prefer to use the 3rd option and then have the css added to the parent component of the repeater because I find that easy to understand when looking through the widget code. But you can also stick with the 1st option and add classes and css to the div element using the containerClasses and containerStyle properties.

So, in your original example, you would just have to set fragment: true in your repeater, or move the css of the flex-container element into the containerStyle property of the repeater.

5

Thanks

working by just set “fragment: true”