OH3 UI Help with getting custom widget to scale like OH widgets

I’ve put together a widget to control my lights, but I’m not convinced this is the best way of achieving my desired layout. Also I have no idea how to get it to scale in the same way as the existing OH widgets, e.g. for an OH widget the gap between the icon and the label on the left changes based on device and orientation. My attempt aligns with an OH widget on my mobile which is my primary use case, but its not aligned when using my desktop.

This is what I want to achieve:

This is my YAML for the above:

uid: WhiteLightListItem
tags: []
props:
  parameters:
    - description: title to display
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 22, 2020, 11:25:52 AM
component: f7-list-item
config:
  mediaItem: true
slots:
  media:
    - component: f7-row
      config:
        style:
          width: inherit
          flex-wrap: nowrap
      slots:
        default:
          - component: f7-row
            config:
              style:
                width: inherit
                flex-wrap: nowrap
                justify-content: flex-start
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: slider
                    height: 32
                    style:
                      margin-right: var(--f7-list-item-media-icons-margin)
                - component: Label
                  config:
                    text: '=(props.title != null  ? props.title : props.item.replace("Light", ""))'
                    style:
                      margin-top: 5px
                      margin-left: var(--f7-list-item-media-margin)
          - component: f7-row
            config:
              style:
                width: inherit
                flex-wrap: nowrap
                justify-content: flex-end
            slots:
              default:
                - component: oh-button
                  config:
                    fill: true
                    raised: true
                    bgColor: '=(items[props.item].state == 0) ? "black" : "white"'
                    action: popover
                    actionModal: widget:WhiteLightCard
                    actionModalConfig:
                      item: =(props.item)
                    style:
                      height: 30px
                      width: 30px
                - component: oh-toggle
                  config:
                    item: =(props.item)
                    style:
                      margin-left: 15px
                      margin-right: 1px
  footer:
    - component: f7-row
      config:
        style:
          width: inherit
          flex-wrap: nowrap
          justify-content: center
      slots:
        default:
          - component: oh-slider
            config:
              item: =(props.item)
              style:
                width: 60%

This is an example of how the label doesn’t align with an OH widget:

  1. Is there a better way of defining the YAML to achieve my layout?
  2. Is there a way of getting my widget to scale the same as the OH widgets?

I think your not getting a reply as you have not defined what your desired layout is, I have no idea what ‘look’ you want.

For example you don’t need to stick to the standard look, you can create controls now that look like habpanel widgets like this one…

Does this code help?

Dimmer widget oh3 and UI design - Add-ons / UIs - openHAB Community

What I’m still struggling with is the position at which the label text starts after the icon and I can’t work out what magic combination of padding/margin/position the standard widgets use.

In the screenshot below Lamp is the default list widget for a switch and I’m trying to get my custom widget Main Back to have the label text lined up with Lamp. The gap between the icon and the label is bigger on a phone screen compared to the desktop and I’m trying to work out how that is achieved. At the moment I have it lined up nicely for my phone screen, but it would be nice to know how to configure it to be consistent with the standard widget.

Here is a tip: open up the inspector of your web browser it might be Ctrl shift i from memory and it lets your browse through the CSS. Knowing what class is applied to the control you are trying to copy or if it is a combination of other CSS attributes can help you work it out without guessing.

Hey, did you ever manage to fix this? I am having the same problem