Custom-Widget - horizontal alignment - layout

Setup, Configuration and Use Beginners
1

Hi all,
I have “tinkered together” a Moonphase-Widget, but I have problems with the text alignment
Yaml:

uid: z_test_moonphasees_v0.0
tags:
  - Anfängerspielerei
  - Mondphasen
  - https://www.rapidtables.com/web/css/css-color.html#red  -- CSS-Colors
  - peter-pan
props:
  parameters:
    - description: Uni-Farbe z.B. green or blue or yellow (default - orangered)
      label: Text-Farbe
      name: textcolor1
      required: false
      type: TEXT
timestamp: Jul 16, 2022, 1:07:32 PM
component: f7-card
config:
  style:
    background-image: ="linear-gradient(rgba(0,191,255,0.3), rgba(70,130,180,0.4)), url(/static/picture/mond3_orbit.jpg)"
    background-position: center center
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    height: auto
    margin: 5px
    noShadow: true
    padding: 0px
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: silver
          font-size: 18px
          justify-content: flex-end
          margin-top: -15px
          min-height: 20px
          padding: 10px
      slots:
        default:
          - component: Label
            config:
              style:
                left: 40px
                margin-left: 20px
                position: absolute
              text: Mondphasen
          - component: Label
            config:
              text: Datum
          - component: Label
            config:
              style:
                margin-left: 20px
                margin-right: -5px
              text: Uhrzeit
    - component: f7-card-content
      config:
        style:
          color: green
          font-size: 18px
          justify-content: flex-start
          margin-top: 5px
          padding: 0px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 35px
                          icon: moon
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: Neumond
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                      left: 0px
                      position: absolute
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 35px
                          icon: moon3_first
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="zunehmender Mond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 35px
                          icon: moon3_full
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="Vollmond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 35px
                          icon: moon3_third
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="abnehmender Mond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            white-space: nowrap
                          text: ="aktuelle Entfernung zum Mond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                      position: absolute
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =Number.parseInt(items.Kilometer_distance.state).toLocaleString() + ' km'

grafik

Thx in advance for every hint or a solution

Cheers,
Peter

2

At this point, I would use the browsers “inspect” function to see the css property values of the misaligned element and those around it to see which setting is not correct. My guess is that the two column elements in that last row are different heights because the first includes the icon and the second only text.

1 Like
3

Thx for reply. I try to use the “inspect” but I didn’t understand how to use and where to look or edit. Sorry, but I’m a bit stupid and not very experienced with those tools.

grafik
grafik1618×518 144 KB

The most I am doing with Custom-Widgets is “try and error” and looking for snippets, which I think i can use. So the code is mostly not very optimized :crazy_face:

But what you wrote about the column elements and icon-sizes, made me thinking about changing icon-Size and text-size, so it came to a solution.
But it is not the best, because now I have a problem with "block-Sizing of a row.
grafik

Many thx for your hints.

Cheers - Peter

Edit:
actual Yaml:

uid: z_test_moonphasees_v0.0
tags:
  - Anfängerspielerei
  - Mondphasen
  - https://www.rapidtables.com/web/css/css-color.html#red  -- CSS-Colors
  - peter-pan
props:
  parameters:
    - description: Uni-Farbe z.B. green or blue or yellow (default - orangered)
      label: Text-Farbe
      name: textcolor1
      required: false
      type: TEXT
timestamp: Jul 17, 2022, 1:00:35 AM
component: f7-card
config:
  style:
    background-image: ="linear-gradient(rgba(0,191,255,0.3), rgba(70,130,180,0.4)), url(/static/picture/mond3_orbit.jpg)"
    background-position: center center
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    height: auto
    margin: 5px
    noShadow: true
    padding: 0px
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: 18px
          justify-content: flex-end
          margin-top: -15px
          min-height: 20px
          padding: 10px
      slots:
        default:
          - component: Label
            config:
              style:
                left: 40px
                margin-left: 20px
                position: absolute
              text: Mondphasen
          - component: Label
            config:
              text: Datum
          - component: Label
            config:
              style:
                margin-left: 20px
                margin-right: -5px
              text: Uhrzeit
    - component: f7-card-content
      config:
        style:
          color: green
          font-size: 20px
          justify-content: flex-start
          margin-top: 5px
          padding: 0px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 30px
                          icon: moon3_new1
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: Neumond
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                      left: 0px
                      position: absolute
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 30px
                          icon: moon3_first
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="zunehmender Mond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 30px
                          icon: moon3_full
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="Vollmond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 30px
                          icon: moon3_third
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="abnehmender Mond"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-end
                  slots: {}
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                - component: Label
                  config:
                    style:
                      margin-left: 10px
                    text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            margin-right: 7px
                            white-space: nowrap
                            width: 289px
                          text: ="aktuelle Entfernung"
                      - component: Label
                        config:
                          style:
                            margin-left: 0px
                            white-space: nowrap
                          text: =Number.parseInt(items.Kilometer_distance.state).toLocaleString() + ' km'
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            margin-right: 7px
                            white-space: nowrap
                            width: 289px
                          text: ="aktuelle Phase"
                      - component: Label
                        config:
                          style:
                            margin-left: 0px
                            white-space: nowrap
                          text: =items.Moon_Phase.displayState
4

at the very end I found a solution, using the hints of @JustinG to use only one f7-col.
The Code now is:

uid: moonphases_v0.1
tags:
  - Anfängerspielerei
  - Mondphasen
  - https://www.rapidtables.com/web/css/css-color.html#red  -- CSS-Colors
  - peter-pan / fibu-freak
props:
  parameters:
    - description: Uni-Farbe z.B. green or blue or yellow (default - orangered)
      label: Text-Farbe
      name: textcolor1
      required: false
      type: TEXT
timestamp: Jul 18, 2022, 1:05:28 PM
component: f7-card
config:
  style:
    background-image: ="linear-gradient(rgba(0,191,255,0.3), rgba(70,130,180,0.4)), url(/static/picture/mond3_orbit.jpg)"
    background-position: center center
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    height: auto
    margin: 5px
    noShadow: true
    padding: 0px
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: 18px
          justify-content: flex-end
          margin-top: -15px
          min-height: 20px
          padding: 10px
      slots:
        default:
          - component: Label
            config:
              style:
                left: 40px
                margin-left: 20px
                position: absolute
              text: Mondphasen
          - component: Label
            config:
              text: Datum
          - component: Label
            config:
              style:
                margin-left: 20px
                margin-right: -5px
              text: Uhrzeit
    - component: f7-card-content
      config:
        style:
          color: green
          font-size: 18px
          justify-content: flex-start
          margin-top: 5px
          margin-left: -5px
          padding: 0px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                      height: 26px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_new1
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: Neumond
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                      height: 26px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_first
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="zunehmender Mond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                      height: 26px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_full
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="Vollmond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                      height: 26px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_third
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="abnehmender Mond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            margin-right: 7px
                            white-space: nowrap
                          text: ="aktuelle Entfernung"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                            white-space: nowrap
                          text: =Number.parseInt(items.Kilometer_distance.state).toLocaleString() + ' km'
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 55px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            margin-right: 7px
                            white-space: nowrap
                          text: ="aktuelle Phase"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                            white-space: nowrap
                          text: =items.Moon_Phase.state

grafik
grafik384×557 103 KB

But I have a last question.

I have defined in every oh-icon component the “height”-Parameter. Is it possible to set a “global” variable and use it instead as an alias.

If yes, how and where to to set and how and where to use :upside_down_face: :slightly_smiling_face: