Visualisation issue with Main UI page using widgets

Setup, Configuration and Use Widgets
, ,
1

I created a couple of widgets and pages in v3.4.0 and decided to create a complete new installation from scratch with v5.1.0, recreated the whole config (which is mostly text based) and copied the yaml code of both widgets and pages. When I now look at the result, the layout is completely malformed, it seems that there is some hidden default to show certain components in the middle instead of being at the left side as intended. The widget itself show correctly, it’s only when used from a page that it goes wrong.

Screenshots

This is how the widget should look like:

image

and this is how it looks like in the page (v5.1.0):

image

In v3.4.0 it showed correctly (don’t mind the values [null] as the old instance is no longer getting the updated values)

image

Resources

Here’s the widget code:

uid: Mx_Kamer
tags: []
props:
  parameters:
    - description: Select Mx room
      label: Give room name (prefix for items)
      name: MxRoom
      required: true
      type: TEXT
    - context: item
      default: "-"
      description: item
      label: Give humidity item
      name: Humid
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 4, 2025, 9:25:51 PM
component: f7-card
config:
  style:
    --f7-card-margin-horizontal: 0px
    background-color: rgb(0, 0, 0)
    border-radius: 12px
    box-shadow: 0px 1px 4px -2px
    height: 3rem
    text-shadow: 0px -1px
    width: 24rem
slots:
  default:
    - component: f7-badge
      config:
        bgColor: black
        style:
          $transform: skew(-45deg)
          background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
          border-radius: 12px
          box-shadow: 0px 2px 5px
          height: 40px
          left: 10px
          position: absolute
          top: 5px
          width: 370px
    - component: oh-link
      config:
        action: command
        actionCommand: =props.MxRoom
        actionItem: strChart_Label
        style:
          color: yellow
          left: 20px
          position: absolute
          top: 11px
        text: =props.MxRoom
    - component: oh-link
      config:
        style:
          color: white
          left: 135px
          position: absolute
          top: 11px
        text: =items["Temp_Mx_" + props.MxRoom].displayState
    - component: oh-link
      config:
        iconF7: "=(items['Switch_Mx_' + props.MxRoom].state === 'OPEN') ? 'rays' :
          'flame_fill' "
        iconSize: "=(items['Switch_Mx_' + props.MxRoom].state === 'OPEN') ? '12px' :
          '15px' "
        style:
          color: "=(items['Switch_Mx_' + props.MxRoom].state === 'OPEN') ? 'white' : 'red'
            "
          left: 195px
          position: absolute
          top: 14px
    - component: oh-link
      config:
        style:
          color: lightblue
          left: 250px
          position: absolute
          top: 3px
        text: =items["Set_Mx_" + props.MxRoom].displayState | items["Set_Mx_" +
          props.MxRoom].state
    - component: Label
      config:
        style:
          color: lightblue
          font-size: 10px
          left: 220px
          line-height: 32px
          position: absolute
          top: 16px
        text: =items["Text_Mx_" + props.MxRoom].state
    - component: Label
      config:
        style:
          color: teal
          font-size: 14px
          left: 320px
          line-height: 32px
          position: absolute
          top: 8px
        text: =items["Vocht_" + props.MxRoom].state + " %"
        visible: "=items['Vocht_' + props.MxRoom].state === '-' ? false : true"

And here is the page defenition:

config:
  colNum: 8
  fixedType: grid
  hideNavbar: false
  label: Moloch-x
  layoutType: fixed
  scale: true
  screenHeight: 1840
  screenWidth: 540
  showFullscreenIcon: true
  sidebar: true
 blocks: []
masonry: []
grid:
  - component: oh-grid-item
    config:
      h: 1
      w: 8
      x: 0
      y: 3
      position: absolute
    slots:
      default:
        - component: widget:Mx_Kamer
          config:
            Humid: Vocht_Wemos2_Keuken
            MxRoom: Keuken
  - component: oh-grid-item
    config:
      h: 1
      w: 8
      x: 0
      y: 4
    slots:
      default:
        - component: widget:Mx_Kamer
          config:
            MxRoom: Salon
canvas: []

Any help for debugging the issue or other sugestions for improvements are welcome.

Just for info: I got my inspiration for this in the Harmony hub remote widget in the that is published in the market place.

2

First off: Please change the categories and tags for this topic. The Marketplace categories are only for publishing contributions that other users can then install directly. Because you have put this in the wrong category, it currently shows up in the add-on store for all users:

image
image259×544 15.3 KB

As to the actual issue, I don’t ever use fixed grid layouts so I can’t pinpoint exactly the problem. However, between 5.0 and 5.1 there was a significant update to the underlying UI libraries. So, you’re jump from 3.4 to 5.1 not only includes several years of tweaks and minor updates to page and widget rendering but major fundamental shifts as well.

This shouldn’t happen, even with a major update like 5.1. The widget editor should always show a preview of what will appear on a page. It’s possible that there is some bug lurking on the fixed-grid pages that is driving this error, however, your widget itself is a little problematic so it’s hard to say for certain.

The biggest issue is the use of absolute positioning for every one of the components. This will always be the most brittle way of arranging a widget and you should 95% expect it to break when viewing that widget in any scenario other than the original one it was created in.

Your best course of action would be to rework the widget to use some better responsive alignment method. There are many different responsive alignment options here. If you just put all your components in an f7-row (and the two lightblue components in their own f7-col) you’ll get most of the way there. The f7-row uses flexbox alignment for anything placed in it. If you search the forum for flexbox you’ll find many examples and explanations and you can read detailed description here:

3

Thanks a lot for your feedback. In the meanwhile I adapted the category & tags. I don’t have much experience in responsive ui’s, so I’ll look into the flexbox layout guide.

As you indicated that the page layout of a widget should never behave differently than the widget itself: that would mean there is a bug in the latest version. That would probably solve my issue, even though I agree my widget will need some rework.

4

I refactored the whole widget based on Flexbox layout and I’m getting (almost) the desired result. Still some undesired margins that remain while I’ve put “margins: 0” and “padding: 0” ialmost everywhere. This remains something to debug in more detail.

BUT… when calling my adapted widget from a page, I got some unexplainable behaviour again. At the end, I decided to upgrade my openHAB to v5.1.1 and that solved the issue. As I kept the old “problematic” version: I did the test and yes: that problem is now gone as well. The good thing is that I learned to work with responsive design.