Right align element in oh-cell

I need some advice from css experts please.
Which css properties do I have to use to make the moon icon right-aligned in an oh-cell given that the layout page is responsive. Unfortunately

postion: absolute
right: 0

does not work as the f7-block does not have the cell’s width.
This is what looks like:


Here is the current yaml code. I am struggeling now for 2 days and am not able to find a solution. Many thanks!

component: oh-cell
config:
  expandable: true
slots:
  header:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          align-items: center
      slots:
        default:
          - component: Label
            config:
              text: 2°
          - component: oh-icon
            config:
              icon: weather.png
          - component: Label
            config:
              text: weather condition
          - component: oh-icon
            config:
              icon: moon.svg

Put the icon to align on the right in the background slot instead of the header slot:

component: oh-cell
config:
  expandable: true
slots:
  background:
    - component: oh-icon
      config:
        icon: moon
        width: 40
        style:
          position: absolute
          right: 10px
          top: 10px
  header:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          align-items: center
      slots:
        default:
          - component: Label
            config:
              text: 2°
          - component: oh-icon
            config:
              icon: weather.png
          - component: Label
            config:
              text: weather condition

image

1 Like

good idea. works fine. Thanks you very much Yannick

@others: In case, there is a ccs solution, please let me know. I am alsways willing to learn.

You won’t find a solution that doesn’t involve the background slot because widgets in that slot get added to a container that matches the width of the cell when not expanded:

whereas what gets added to the header slot gets added to a container that has the width of the card when expanded:

1 Like

EDIT: hmmm. after leaving and re-opening the yaml code editor the widget is now showing up with a different background color. so, that is being solved.
If someone has some useful tips as to where to make the code smarter, they are more than welcome.

When using the background slot I am not able to control the background color anymore by whatever control I try.
Sounds to some extend logically but I thought at least by setting the background of the f7-block I should be able to override it.

I also think that the whole yaml code is too clumsy.
There probably is a smarter way to achieve the desired result.
If you have some tips I would be thankful. Please do not misunderstand - I am not thinking of getting the whole code rewritten. Just some tips where to learn a bit more.

uid: my-wetter-cell
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 19, 2021, 1:18:23 PM
component: oh-cell
config:
  background: gray
  color: gray
  bgColor: gray
  expandable: true
  on: true
  style:
    --f7-card-expandable-bg-color: gray
slots:
  background:
    - component: f7-block
      config:
        bgColor: gray
        background: gray
        style:
          background-color: gray
          background: gray
          --f7-card-expandable-bg-color: gray
          position: absolute
          left: 0px
          top: -20px
          width: 100%
          _padding: 0px 0px 0px 0px
        class:
          - card-opened-fade-out
      slots:
        default:
          - component: oh-icon
            config:
              icon: ="oh:mymoon-" + items.Mondphase.state.toString() + ".svg"
              style:
                position: absolute
                right: 15px
                top: 12px
                width: 30px
          - component: f7-row
            config:
              style:
                height: 55px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 25px
                      display: flex
                      align-items: center
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: ="oh:owm-" + items.OWM_IconID.state.toString() + ".png"
                          style:
                            width: 55px
                      - component: Label
                        config:
                          style:
                            fontSize: 34px
                            padding-right: 8px
                            padding-left: 25px
                          text: =items.OWM_Aussentemperatur.displayState
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                          text: ="(" + items.OWM_GefuhlteTemperatur.displayState + ")"
          - component: f7-row
            config:
              style:
                height: 25px
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                            fontWeight: 600
                          text: =items.OWM_Wetterlage.state
          - component: f7-row
            config:
              style:
                height: 20px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 80px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                          text: ="🌤 " + items.OWM_Bewolkung.displayState
                - component: f7-col
                  config:
                    style:
                      width: calc(100% - 82px)
                      border-left: 1px solid gray
                      padding-left: 8px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                          text: ="🔆 " + dayjs(items.OWM_SunriseTime.state).format("HH:mm") + "-" + dayjs(items.OWM_SunsetTime.state).format("HH:mm")
          - component: f7-row
            config:
              style:
                height: 20px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 80px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                          text: ="🌬 " + items.OWM_Wind.displayState
                - component: f7-col
                  config:
                    style:
                      width: calc(100% - 82px)
                      border-left: 1px solid gray
                      padding-left: 8px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            fontSize: 16px
                          text: ="🔅 " + items.SNMPcameingang_Helligkeit.displayState
  default:
    - component: oh-webframe
      config:
        display: flex
        align-content: center
        align-items: center
        height: 270px
        src: /static/wetter/fc_tage.html