Widget look and feel broken after migration to OpenHab5.1 (Help with YAML needed)

bkumio · January 19, 2026, 7:05am

Dear all after migrating to OH5.1 the visualization of myroomcard is unfortunately somewhat broken. Before the migration to 5.1 every was rendered correctly and the pictograms and status were on separate lines and transparent.

I am not a YAML Expert. Below the codefence. It is based on the original roomCard from Andras Uhrin (never published to Market place, but I like it)

Anybody any idea what to change on the code to get the transparency back and the line breaks as they were before .

Many thanks for pushing me into the right direction

uid: my_RoomCard
tags: []
props:
  parameters:
    - description: Header text
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Unique ID needed for popup (without space)
      label: Unique ID
      name: popupId
      required: false
      type: TEXT
    - description: Color Code for the Top (html HEX code)
      label: Color Code Top - day (hex)
      name: colorCodeTop_d
      required: false
      type: TEXT
    - description: Color Code for Text of the Top (html HEX code)
      label: Color Code Text - day(hex)
      name: colorCodeTopText_d
      required: false
      type: TEXT
    - description: Color Code for the Top (html HEX code)
      label: Color Code Top - night (hex)
      name: colorCodeTop_n
      required: false
      type: TEXT
    - description: Color Code for Text of the Top (html HEX code)
      label: Color Code Text - night (hex)
      name: colorCodeTopText_n
      required: false
      type: TEXT
    - description: Color Code for the Bottom (html HEX code)
      label: Color Code Bottom - day (hex)
      name: colorCodeBottom_d
      required: false
      type: TEXT
    - description: Color Code for Text of the Bottom (html HEX code)
      label: Color Code Bottom Text - day(hex)
      name: colorCodeBottomText_d
      required: false
      type: TEXT
    - description: Color Code for the Bottom (html HEX code)
      label: Color Code Bottom - night (hex)
      name: colorCodeBottom_n
      required: false
      type: TEXT
    - description: Color Code for Text of the Top (html HEX code)
      label: Color Code Bottom Text - night (hex)
      name: colorCodeBottomText_n
      required: false
      type: TEXT
    - description: Background Image Url
      label: Background Image Url
      name: backgroundImageUrl
      required: false
      type: TEXT
    - context: item
      description: Lights state
      label: Lights state
      name: lightState
      required: true
      type: TEXT
    - context: item
      description: Window state
      label: Window state
      name: windowState
      required: true
      type: TEXT
    - context: item
      description: Temperature of Room
      label: Measured Temperature of Room
      name: roomTemperature
      required: true
      type: TEXT
    - context: item
      description: Setpoint Temperature of Room
      label: Setpoint Temperature of Room
      name: roomSetTemperature
      required: true
      type: TEXT
    - description: Show Lower Part Information
      label: Show Lower Part
      name: showLowerPart
      required: false
      type: BOOLEAN
  parameterGroups:
    - name: buttonAction
      context: action
      label: Action
      description: Action to start
timestamp: Dec 28, 2025, 7:57:32 PM
component: f7-card
config:
  class:
    - no-padding
  style:
    height: 120px
    --f7-bars-text-color: white
    --f7-button-bg-color: '=(themeOptions.dark === "dark") ? "#3F3F3F00" : "#F7F7F700"'
    --f7-button-border-color: rgba(55, 55, 55, 0.15)
    --f7-button-border-radius: 15px
    --f7-button-border-width: 0px
    --f7-button-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1)
    --f7-button-fill-hover-bg-color: rgba(125, 125, 125, 0.9)
    --f7-button-pressed-bg-color: rgba(125, 125, 125, 0.5)
    --f7-card-border-color: rgba(55, 55, 55, 0.15)
    --f7-card-border-radius: 15px
    --f7-card-border-width: 2px
    --f7-card-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1)
    --f7-navbar-link-color: white
    --f7-navbar-text-color: white
    --roomWidgetBottomTextColor: '=(themeOptions.dark === "dark") ? "#F7F7F7" : "#111111"'
    --roomWidgetLowerPart-bg-color: '=(themeOptions.dark === "dark") ? "#3F3F3F" : "#F7F7F7"'
    --roomWidgetLowerPartRGBA-bg-color: '=(themeOptions.dark === "dark") ? "rgb(63,63,63)" : "rgb(247,247,247)"'
    --roomWidgetUpperTextColor: '=(props.colorCodeTopText_d) ? (props.colorCodeTopText_d) : "#FFFFFF"'
slots:
  default:
    - component: oh-button
      config:
        actionPropsParameterGroup: buttonAction
        class:
          - no-padding
        fill: false
        style:
          background: '=(props.backgroundImageUrl) ? "url(" + props.backgroundImageUrl +
            ")" : (props.colorCodeTop_d) ? (props.colorCodeTop_d) : "#AFDFFF"'
          background-size: cover
          height: 100%
          no-border: true
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - flex-direction-row
                - justify-content-center
                - align-items-flex-end
                - no-padding
              style:
                height: 60px
                width: 100%
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - padding-left
                      - padding-top
                      - display-flex
                      - flex-direction-row
                      - justify-content-start
                      - align-items-flex-start
                      - text-align-left
                    style:
                      color: var(--roomWidgetUpperTextColor)
                      font-size: 20px
                      font-weight: 300
                      height: 100%
                      opacity: 100%
                      text-shadow: 0px 0px 6px rgba(0,0,0,1.0)
                      text-transform: none
                      width: 100%
                    text: =props.header
          - component: f7-row
            config:
              class: '=(props.showLowerPart) ? "" : "display-none"'
              style:
                background: var(--roomWidgetLowerPart-bg-color)
                height: 40px
                opacity: 70%
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          class: '=(props.lightState) ? "" : "display-none"'
                          f7: lightbulb
                          size: 15px
                          style:
                            color: var(--roomWidgetBottomTextColor)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          class: '=(props.windowState) ? "" : "display-none"'
                          icon: window
                          size: 5px
                          style:
                            color: var(--roomWidgetBottomTextColor)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      width: calc(100% - 180px)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - text-align-center
                          style:
                            color: var(--roomWidgetBottomTextColor)
                            font-size: 12px
                            font-weight: 400
                          text: '=(props.roomTemperature) ?
                            Number(items[props.roomTemperature].state).toFixed(1)+"
                            °C  " : ""'
          - component: f7-row
            config:
              class: '=(props.showLowerPart) ? "" : "display-none"'
              style:
                background: var(--roomWidgetLowerPart-bg-color)
                height: 30px
                opacity: 90%
                width: 100%
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-col
                      - justify-content-center
                      - align-items-flex-end
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - display-flex
                            - flex-direction-column
                            - text-align-center
                          style:
                            color: var(--roomWidgetBottomTextColor)
                            font-size: 10px
                            font-weight: 300
                          text: '=(props.lightState) ? items[props.lightState].state : ""'
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-flex-end
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - display-flex
                            - flex-direction-column
                            - text-align-center
                          style:
                            color: var(--roomWidgetBottomTextColor)
                            font-size: 10px
                            font-weight: 300
                            overflow: hidden
                          text: '=(props.windowState) ? items[props.windowState].state : ""'
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-felx-end
                    style:
                      height: 100%
                      width: calc(100% - 180px)
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-row
                      - justify-content-center
                      - align-items-flex-end
                    style:
                      height: 100%
                      width: 40px
                  slots:
                    default:
                      - component: Label
                        config:
                          class:
                            - display-flex
                            - flex-direction-column
                            - text-align-center
                          style:
                            color: var(--roomWidgetBottomTextColor)
                            font-size: 10px
                            font-weight: 300
                            overflow: hidde
                          text: '=(props.roomSetTemperature) ? items[props.roomSetTemperature].state+"
                            °C  " : ""'

JustinG · January 19, 2026, 4:09pm

There should have been no change at all in the transparency. Those you have set to static values (70% and 90%) in the opacity style of the second and third f7-rows:

          - component: f7-row
            config:
              class: '=(props.showLowerPart) ? "" : "display-none"'
              style:
                background: var(--roomWidgetLowerPart-bg-color)
                height: 40px
                opacity: 70%
                width: 100%

and

          - component: f7-row
            config:
              class: '=(props.showLowerPart) ? "" : "display-none"'
              style:
                background: var(--roomWidgetLowerPart-bg-color)
                height: 30px
                opacity: 90%
                width: 100%

As for the layout, if I am understanding you correctly, it sounds like your button used to be block display and is now flex display by default. Try adding - display-block to the classes on the oh-button and see if that puts things back where you want them.

bkumio · January 20, 2026, 11:09am

Hi JustinG,

the hint with the “display-block" in the oh-button did solve the problem. Many thanks. There was no additional need to change the transparency.

This widget stuff is amazing on what you can do but at the same time to complex to handle for a non developer like me. I have to guess what the individual lines are for. It is to some extend descriptive but I don’t know what options I have and syntax to use, especially when there are nested objects like a button in a card in a column or so and it seems each has its own logic as sometimes the stuff is set in the class of an object and sometimes in the style….

I guess I need to do a deep dive at some point I am afraid

Nonetheless I am happy after migration to v5.1 . Thanks for the help again.

this is how it looks now

florian-h05 · January 20, 2026, 12:05pm

How should it look?

bkumio · January 20, 2026, 12:50pm

yes, this is what I liked from the original widget from Andras. All rows with different transparency and in config you can pick the color.

First Row Name of room
Second Row (dynamic) Icons
3rd Row Status of objects used

I think the individual objects are managed within columns but I am not 100% sure as this is where my code know-how ends .

The ones having no status or a “NUL" I do have to enhance with persistence on reboot. But my KNX objects do send the status usually every 5/10Min plus on change so this never bothered me too much (yet).

florian-h05 · January 20, 2026, 12:59pm

If it’s state you can set flags in the ETS to the member that „owns the state“ in a group address react to ReadRequest and send its state on request. Then you configure openHAB to read out the state on startup.

bkumio · January 20, 2026, 1:19pm

Luckily the read flags in ETS as already set. I have just added the window and lights semantic groups with the OnStartup persistence now. This is one of the situations where I like the new UI by having the ability to use groups/wildcards.

Usually I do (still) prefer textual configurations in combination with VS Code and OH add-in. But I guess this is because I started with OH1.7 …. and are still used to it.

Appreciate your help

florian-h05 · January 20, 2026, 1:48pm

I prefer reading actively from KNX and I try to avoid restoreOnStartup as much as possible because if there is a system failure, I don’t want to have false values that were restored from persistence shown. You can add the < sign in front of status GAs so openHAB will actively read them during startup, e.g.

    Thing device DimmingActuator [
        address="1.1.29",
        fetch=true,
        pingInterval=300,
        readInterval=0
    ] {
        Type dimmer        : Florian_Deckenlicht                              "Florian Deckenlicht"                           [ switch=">2/4/190", position=">2/4/192+<2/4/194", increaseDecrease=">2/4/191" ]
    }

2/4/194 is configured to be read by openHAB, openHAB does not listen to the other GAs as state should exlusively be denoted by 2/4/194. See the KNX binding documentation wrt to < and > modifiers.

bkumio · January 20, 2026, 2:07pm

Yes your are right, that might be the case. I already have setup the thing via textual config the same way you did. Have removed the “OnStartup” again.

Actually I was too deep in the rabbit hole.
The two “0” Zero were actually Dimmer objects and not switch objects. So zero in that respect means it is “Off” . Maybe I can experiment with the DPT so it gets transformed from Off if zero….

// 1.1.15 Busch Jäger 6188/18-101 Binäreingang, Kontaktabfrage 8fach
    Thing device 1_1_15_Binaereingang "Busch Jaeger Binaereingang 1.1.15" [
        address="1.1.15",
        fetch=false,
        pingInterval=1500,
        readInterval=0
     ] {
        Type contact        : OG_Fensterkontakt_Flur             [ ga="<3/0/9" ]
        Type contact        : OG_Fensterkontakt_Schlafzimmer     [ ga="<3/0/13" ]
        Type contact        : OG_Fensterkontakt_Elternbad        [ ga="<3/0/14" ]
        Type contact        : OG_Fensterkontakt_Kinderbad        [ ga="<3/0/12" ]
        .
        .
        .
        .
    }