Popup Widget with columns and rows - alignment

Hi All

Hoping for some help with my amended Popup weather Widget based on:

UI Widget: Weather (Weather popup #2 (extended))

I have managed to make quite a few changes with Help, but am really stuck now and have tried everything I can think of - I am fairly sure that I have an alignment issue - but as I do not fully grasp the whole concept I am lost.

My current code is as follows:

Wether Widget Extra Line.txt (50.2 KB)

I have added the bit between lines 258 and 288 in order to have another row in which I would like to place 2 Columns
Column 1 with Sunrise Icon and Sunrise Text
Column 2 with Sunset Icon and Sunset Text

However this “block” is just blank and I cannot see my additions.

          - component: f7-block
            config:
              class:
                - padding
              slots:
                default:
                  - component: f7-row
                    config:
                      style:
                        flex-wrap: nowrap
                        z-index: 999
                    slots:
                      default:
                        - component: f7-icon
                          config:
                            f7: sunrise
                            size: 30
                            color: white
                            class:
                              - padding-right
                  - component: Label
                    config:
                      text: Test Text
                      style:
                        color: var(--weather-font-color-main)
                        font-size: 18px
                        line-height: 30px
                        text-align: left
                        white-space: nowrap
                        overflow: hidden
                        text-overflow: ellipsis

The “Working” bit from line 289 is similar to what I am after, but would like to be able to Position the Sunrise and Sunset better and closer together.

Can anyone point out why my added bit has “disappeared”?

Thanks
Mark

So I made some progress with this. I had the slots: incorrectly indented (AGAIN). The slots should be in the same column as config.

I have now got a version with TWO columns and what was supposed to be the Icon and the Text on the same line. However after I added the Columns, the icon and text split onto to lines and I can’t see how to get them back on the same line
Weather Widget Alignment

I would like to Align the Sunrise and XX:XX right on the row and the Sunset and YY:YY Left on the row.

Currently have:

          - component: f7-block
            config:
              class:
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - display-flex
                      - justify-content-space-between
                    style:
                      flex-wrap: nowrap
                      z-index: 999
                  slots:
                    default:
                      - component: f7-col
                        config:
                        style:
                          z-index: 999
                          text-align: right
                        slots:
                          default:
                             - component: f7-icon
                               style:
                                 white-space: nowrap
                               config:
                                 f7: sunrise
                                 size: 30
                                 color: white
                                 class:
                             - component: Label
                               config:
                                 text: "XX:XX"
                                 class:
                                 style:
                                   color: var(--weather-font-color-main)
                                   font-size: 18px
                                   line-height: 30px
                                   text-align: right
                                   white-space: nowrap
                                   overflow: hidden
                                   text-overflow: ellipsis
                      - component: f7-col
                        config:
                        style:
                          z-index: 999
                          text-align: left
                        slots:
                          default:
                             - component: f7-icon
                               config:
                                 f7: sunrise
                                 size: 30
                                 color: white
                                 class:
                             - component: Label
                               config:
                                 text: "YY:YY"
                                 class:
                                 style:
                                   color: var(--weather-font-color-main)
                                   font-size: 18px
                                   line-height: 30px
                                   text-align: right
                                   white-space: nowrap
                                   overflow: hidden
                                   text-overflow: ellipsis 

Any idea how I can get the Icon and Text on teh same line in each column of the row?

Thanks
Mark