[OH3] Span an image across multiple lines

Tags: #<Tag:0x00007fc8f9e360d8> #<Tag:0x00007fc8f9e35fe8>

With HABPanle, I have something similar to this,
grafik

No, I like to create a mainUI widget which looks similar. But I haven’t found any trick yet to span the first column across multiple rows without increasing the space between the cols too much.
Anyone an idea?

I don’t have much experience with the MainUI widgets yet, but my suggestion would be to look at the margin and padding settings on the column. I think the best thing would be to load the page in the browser and then use the ‘Developer Tools’ within the browser to inspect the element where you should be able to override the CSS values and also look at the box model.

I got it working, so far.

Code:

uid: ThermometerList
tags: []
props:
  parameters:
    - description: Beschreibung Thermometer 1
      label: Thermometer
      name: meterName1
      required: false
      type: TEXT
    - context: item
      description: 1. Thermometer
      label: Thermometer
      name: thermometer1
      required: false
      type: TEXT
    - description: Beschreibung Thermometer 2
      label: Thermometer
      name: meterName2
      required: false
      type: TEXT
    - context: item
      description: 2. Thermometer
      label: Thermometer
      name: thermometer2
      required: false
      type: TEXT
    - description: Beschreibung Thermometer 3
      label: Thermometer
      name: meterName3
      required: false
      type: TEXT
    - context: item
      description: 3. Thermometer
      label: Thermometer
      name: thermometer3
      required: false
      type: TEXT
    - description: Beschreibung Thermometer 4
      label: Thermometer
      name: meterName4
      required: false
      type: TEXT
    - context: item
      description: 4. Thermometer
      label: Thermometer
      name: thermometer4
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 28, 2021, 8:42:51 AM
component: f7-card
config:
  style:
    border-radius: 20px
    background-color: rgba(6,25,36)
    --text-color: rgba(255,255,255,1)
slots:
  default:
    - component: f7-block
      config:
        class:
          - no-padding
          - no-margin
        style:
          width: 100%
          height: 100%
          position: absolute
          top: 0
          left: 0
          border-radius: 20px
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 20%
                          class:
                            - padding-top
                            - padding-bottom
                        slots:
                          default:
                            - component: oh-image
                              config:
                                url: /static/icons/thermometer.svg
                                height: 100px
                      - component: f7-col
                        config:
                          style:
                            width: 40%
                        slots:
                          default:
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.meterName1 + ':'
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - padding-top
                                        - text-align-right
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.meterName2 + ':'
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.meterName3 + ':'
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.meterName4 + ':'
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - padding-bottom
                      - component: f7-col
                        config:
                          style:
                            width: 40%
                        slots:
                          default:
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =items[props.thermometer1].displayState
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - padding-top
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =items[props.thermometer2].displayState
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =items[props.thermometer3].displayState
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - text-align-right
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =items[props.thermometer4].displayState
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - padding-bottom
                                        - text-align-right

The only point I struggle with is the text-alignment.

Neither using

config:
    style: 
     text-align: right

nor using

config:
    class: 
     - text-align-right

seems to have an effect for the temperatures as you can see in the picture above.
Anyone any idea?