[OH3] Text Alignment

Add-ons UIs
,
1

I created the following widget,

grafik
grafik1052×338 89.4 KB

but struggling with the text alignment. Column 2 and 3 should both be aligned right.

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
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - padding-top
                                        - margin-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
                                      class:
                                        - margin-right
                            - 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: "=(props.showDigits) ? items[props.thermometer1].state : Math.round(items[props.thermometer1].state.split(' ')[0]) + ' ' + items[props.thermometer1].state.split(' ')[1]"
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - text-align-right
                                        - padding-top
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: "=(props.showDigits) ? items[props.thermometer2].state : Math.round(items[props.thermometer2].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                                      style:
                                        color: var(--text-color)
                                        font-size: 18px
                                        line-height: 30px
                                        text-align: right
                                        white-space: nowrap
                                        overflow: hidden
                                        text-overflow: ellipsis
                                      class:
                                        - text-align-right
                            - component: f7-row
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: "=(props.showDigits) ? items[props.thermometer3].state : Math.round(items[props.thermometer3].state.split(' ')[0]) + ' ' + items[props.thermometer3].state.split(' ')[1]"
                                      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: "=(props.showDigits) ? items[props.thermometer4].state : Math.round(items[props.thermometer4].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                                      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

Non of the technics does have an effect on the alignment, neither

class:
    - text-align-right

nor

    style:
        text-align: right

Is there something obvious I’m defining wrong here?

2

You have a lot of f7-rows/f7-cols that probably aren’t that useful?

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
            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: Label
                  config:
                    text: =props.meterName1 + ':'
                    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
                      - margin-right
                - 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
                    class:
                      - margin-right
                - 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
                    class:
                      - margin-right
                - 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:
                      - margin-right
                      - padding-bottom
          - component: f7-col
            config:
              style:
                width: 40%
            slots:
              default:
                - component: Label
                  config:
                    text: "=(props.showDigits) ? items[props.thermometer1].state : Math.round(items[props.thermometer1].state.split(' ')[0]) + ' ' + items[props.thermometer1].state.split(' ')[1]"
                    style:
                      color: var(--text-color)
                      font-size: 18px
                      line-height: 30px
                      text-align: right
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
                    class:
                      - text-align-right
                      - padding-top
                - component: Label
                  config:
                    text: "=(props.showDigits) ? items[props.thermometer2].state : Math.round(items[props.thermometer2].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                    style:
                      color: var(--text-color)
                      font-size: 18px
                      line-height: 30px
                      text-align: right
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
                    class:
                      - text-align-right
                - component: Label
                  config:
                    text: "=(props.showDigits) ? items[props.thermometer3].state : Math.round(items[props.thermometer3].state.split(' ')[0]) + ' ' + items[props.thermometer3].state.split(' ')[1]"
                    style:
                      color: var(--text-color)
                      font-size: 18px
                      line-height: 30px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis
                    class:
                      - text-align-right
                - component: Label
                  config:
                    text: "=(props.showDigits) ? items[props.thermometer4].state : Math.round(items[props.thermometer4].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                    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
3

Well, this was how I could achieve what I wanted. I’m sure, that this has potential for improvements…
So, taking your hint, I adjusted the code to make more ‘standard’, but the issue with the not working text alignment is still present.
Here the updated version of component layout:

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-row
      config:
        noGap: true
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/icons/thermometer.svg
                    height: 100px
          - component: f7-col
            config:
              width: 50
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - padding-top
                      - text-align-right
                  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
                - component: f7-row
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.meterName2 + ':'
                          style:
                            color: var(--text-color)
                            font-size: 18px
                            line-height: 30px
                            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
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                - component: f7-row
                  config:
                    class:
                      - padding-bottom
                      - text-align-right
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.meterName4 + ':'
                          style:
                            color: var(--text-color)
                            font-size: 18px
                            line-height: 30px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
          - component: f7-col
            config:
              width: 25
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - padding-top
                      - text-align-right
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.showDigits) ? items[props.thermometer1].state : Math.round(items[props.thermometer1].state.split(' ')[0]) + ' ' + items[props.thermometer1].state.split(' ')[1]"
                          style:
                            color: var(--text-color)
                            font-size: 18px
                            line-height: 30px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                - component: f7-row
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.showDigits) ? items[props.thermometer2].state : Math.round(items[props.thermometer2].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                          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.showDigits) ? items[props.thermometer3].state : Math.round(items[props.thermometer3].state.split(' ')[0]) + ' ' + items[props.thermometer3].state.split(' ')[1]"
                          style:
                            color: var(--text-color)
                            font-size: 18px
                            line-height: 30px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                - component: f7-row
                  config:
                    class:
                      - padding-bottom
                      - text-align-right
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.showDigits) ? items[props.thermometer4].state : Math.round(items[props.thermometer4].state.split(' ')[0]) + ' ' + items[props.thermometer4].state.split(' ')[1]"
                          style:
                            color: var(--text-color)
                            font-size: 18px
                            line-height: 30px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
4

So, I figured out that the parameter

 - justify-content-right

will do the trick. But setting this and checking this across browsers liek FireFox and Safari, I detected, that this seems not to be implemented on the Safari side. Checking the CSS Flexbox documentation () I replaced this to

- justify-content-flex-end

which works without any issues.

grafik

Here a YAML example how I implemented it,

...
slots:
  default:
    - component: f7-card-header
      config:
        style:
          --f7-card-header-font-size: 18px
          --f7-card-header-border-color: rgba(255, 255, 255)
      slots:
        default:
          - component: oh-icon
            config:
              icon: thermometer
              height: 30
          - component: Label
            config:
              text: Thermometer
    - component: f7-card-content
      config:
        style:
          padding-top: 0px
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 60
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - justify-content-flex-end
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =props.meterName1 + ':'
                                style:
                                  color: var(--text-color)
                                  font-size: var(--font-size)
                                  line-height: var(--line-height)
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                class:
                                  - padding-top
                      - component: f7-row
                        config:
                          class:
                            - justify-content-flex-end
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =props.meterName2 + ':'
                                style:
                                  color: var(--text-color)
                                  font-size: var(--font-size)
                                  line-height: var(--line-height)
                                  text-align: right
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
...
1 Like