OH3 UI: How to center two knobs in a row

I am trying to create a custom widget for the Eurotronic Spirit Thermostats, having two knobs in one row for setting both target temperatures.

    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item: =props.itemSetpointHeat
          - component: f7-col
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item: =props.itemSetpointEco

How can I center both knobs within the row or in their columns ???
@RGroll or @ysc any hint ???

You can use text-align on the f7-row for this:

    - component: f7-row
      config:
        class:
          - text-align-center
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item:  =props.itemSetpointHeat
          - component: f7-col
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item: =props.itemSetpointEco

Thanks Rainer,
tried many params, but not this one. Great !!!

A few more things:

  1. These F7 classes are just adding the corresponding CSS attributes so display-flex (class) => display: flex (CSS), align-content-center => align-content: center and so on
  2. You can’t use justify-content-* without display-flex
  3. f7-col is mostly useful when you want responsive layouts, i.e. 1 column by default (mobile) but 2 columns on medium screens and above. To center, apply both display-flex and justify-content-center to the column itself:
    So you’d have:
   - component: f7-row
     slots:
        default:
          - component: f7-col
            config:
              width: 100
              medium: 50
              class:
                - display-flex
                - justify-content-center
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item: =props.itemSetpointHeat
          - component: f7-col
            config:
              width: 100
              medium: 50
              class:
                - display-flex
                - justify-content-center
            slots:
              default:
                - component: oh-knob
                  config:
                    min: 16
                    max: 30
                    step: 0.5
                    size: 150
                    item: =props.itemSetpointEco

You’ll see how it adapts on smaller screens.
Note that that’s also the purpose of the “blocks/row/col” hierarchy in layout pages.

  1. If you don’t need that responsive layout (but why wouldn’t you?), then you can simply use flexbox and get rid of the columns altogether.
    - component: f7-block
      config:
        # Using the CSS styles directly instead of the classes
        style:
          display: flex
          justify-content: space-around
          flex-wrap: wrap
      slots:
        default:
          - component: oh-knob
            config:
              min: 16
              max: 30
              step: 0.5
              size: 150
              item: =props.itemSetpointHeat
          - component: oh-knob
            config:
              min: 16
              max: 30
              step: 0.5
              size: 150
              item: =props.itemSetpointEco

Flexbox is hard but this article illustrates it nicely:

2 Likes

Thanks Yannick, so I have to read some stuff and can optimize my custom widgets before finally releasing them…