[OH3] Alignment questions

[icompas (Immo)]

I like to align an oh-icon object with a oh-button, but get different results in the mainUI widget designer vs. the actual page, where I’m using it.

While designing it, the widget is displayed as desired,

Using it in a cell on a pages, it looks misaligned,

The proportion of the columns is fine, but the hight of the oh-buttons, especially the 2nd one, is not like expected. I haven’t found a way yet to get this straighten out.

Any suggestions are welcome!

Code:

component: f7-card
config:
  class:
    - padding
  style:
    border-radius: 20px
    background-color: rgba(255,255,255)
    --text-color: rgba(0,0,0,1)
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              width: 35
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: vacationbw
                          height: 35px
                - component: f7-row
                  config:
                    class:
                      - padding-top
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: snowbw
                          height: 35px
          - component: f7-col
            config:
              width: 65
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          style:
                            position: absolute
                            width: 100%
                            height: 100%
                      - component: oh-icon
                        config:
                          icon: power
                          style:
                            height: 30px
                      - component: Label
                        config:
                          text: ON
                          style:
                            font-size: 18px
                            color: var(--text-color)
                - component: f7-row
                  config:
                    class:
                      - padding-top
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          style:
                            position: absolute
                            width: 100%
                            height: 100%
                      - component: oh-icon
                        config:
                          icon: power
                          style:
                            height: 30px
                      - component: Label
                        config:
                          text: ON
                          style:
                            font-size: 18px
                            color: var(--text-color)

[Nico_R (Nico)]

Hi @icompas ,

here my suggestion in complete new coding structure with cols.

I hope this helps you to find the hints.

best,
Nico

uid: widget_92f9230b3a
tags: []
props:
  parameterGroups: []
timestamp: Feb 4, 2021, 7:51:16 PM
component: f7-card
config:
  class:
    - padding
  style:
    border-radius: 20px
    background-color: rgba(255,255,255)
    --text-color: rgba(0,0,0,1)
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 50px
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: vacation
                          height: 35px
                - component: f7-col
                  slots:
                    default:
                      - component: oh-button
                        config:
                          style:
                            width: 100%
                            height: 100%
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: switch
                                height: 35
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ON
                          style:
                            position: absolute
                            right: 0
                            margin-right: 0
                            font-size: 18px
                            color: var(--text-color)
          - component: f7-row
            config:
              style:
                height: 50px
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: snow
                          height: 35px
                - component: f7-col
                  slots:
                    default:
                      - component: oh-button
                        config:
                          style:
                            width: 100%
                            height: 100%
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: switch
                                height: 35px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: ON
                          style:
                            position: absolute
                            right: 0
                            font-size: 18px
                            color: var(--text-color)

[icompas (Immo)]

Thanks for sharing your approach. I finally figured it out, and it looks similar. I think the major difference is, that I put the line with the icon, the button icon and the label into a block. Here an example,

...
- component: f7-card-content
      config:
        class:
          - padding
      slots:
        default:
          - component: f7-block
            config:
              style:
                --f7-block-padding-vertical: 0px
                --f7-block-padding-horizontal: 15px
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 50
                        slots:
                          default:
                            - component: f7-row
                              config:
                                class: justify-content-left
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: =props.titleButton_1
                                      style:
                                        padding-right: 15px
                                        padding-bottom: 15px
                                        line-height: 20px
                                        font-size: 16px
                                        font-weight: 500
                      - component: f7-col
                        config:
                          width: 50
                        slots:
                          default:
                            - component: f7-row
                              config:
                                class:
                                  - button
                                  - button-large
                                  - align-items-center
                                  - justify-content-left
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      actionItem: =props.button_1
                                      action: toggle
                                      actionCommand: ON
                                      actionCommandAlt: OFF
                                      style:
                                        position: absolute
                                        width: 100%
                                        height: 100%
                                  - component: oh-icon
                                    config:
                                      icon: '=(items[props.button_1].state === "ON") ? "power-on" : "power-off"'
                                      class:
                                        - margin-right
                                      style:
                                        height: 32px
                                  - component: Label
                                    config:
                                      text: '=(items[props.button_1].state === "ON") ? "AN" : "AUS"'
                                      style:
                                        font-size: 16px
                                        color: var(--text-color)