Issue with Label Alignment in Custom Widget Code

Setup, Configuration and Use Widgets
1

Hello everyone,

I’ve created a widget using the following YAML code (see below). However, I’ve run into a styling issue. My goal is to have the label (currently set to display “wwww” as default) align directly after the icon in the header. However, it’s rendering on the far left instead of immediately following the icon.

Here’s the YAML configuration:

uid: widget_newlayout
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 13, 2024, 8:54:06 AM
component: oh-context
config:
  constants:
    widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
slots:
  default:
    - component: f7-card
      config:
        style:
          background-color: "=props.bgcolor ? props.bgcolor : ''"
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
          height: 150px
          margin-left: 5px
          margin-right: 5px
          noShadow: false
          padding: 0px
      slots:
        header:
          - component: f7-icon
            config:
              f7: alarm
              size: 18
              style:
                margin-right: 0px
              visible: true
          - component: Label
            config:
              style:
                font-size: 12px
                margin-left: -20px
              text: "=props.title ? props.title : 'wwww'"
        content:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 16px
                color: "#555555"
                font-weight: 600
          - component: oh-slider
            config:
              item: BrightnessItem
              min: 0
              max: 100
              step: 1
              unit: "%"
              style:
                --f7-range-bar-border-radius: 8px
                --f7-range-bar-size: 8px
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                --f7-range-knob-size: 20px
              width: calc(100% - 40px)
        footer:
          - component: f7-row
            config:
              style:
                width: 100%
            slots:
              default:
                - component: oh-button
                  config:
                    text: Szene 1
                    action: command
                    actionCommand: =props.Scene1Value
                    actionItem: =props.SceneGroupItem
                    visible: true
                    style:
                      width: 30%
                - component: oh-button
                  config:
                    text: Szene 2
                    action: command
                    actionCommand: =props.Scene2Value
                    actionItem: =props.SceneGroupItem
                    visible: true
                    style:
                      width: 30%
                - component: oh-button
                  config:
                    popupOpen: =`.popup-${const.widgetID}`
                    iconF7: gear_alt
                    style:
                      width: 30%

Question

I’d like to understand why the label “wwww” doesn’t align directly after the f7-icon component in the header, even though I’ve set the margin-left of the label to -20px. I suspect there might be something off with either the label’s styling or layout configuration.

Any insights or suggestions on how to get the label positioned immediately after the icon would be greatly appreciated!

Thank you!

Bildschirmfoto vom 2024-11-13 09-00-23
Bildschirmfoto vom 2024-11-13 09-00-231290×349 13.4 KB

2

The f7 card headers use flexbox display with space-between as the default justification. So two items will always be on either end of a large space between them.

The easiest solution is to give the header only one child item to arrange. In this case that means setting an f7-row or even just a basic div component as the only direct child of the header and putting your other two components inside that.

The most direct solution would be to include a stylesheet in the card config that modifies the flex spacing on the header. Something like this would probably be sufficient:

stylesheet: >
  .card-header {
    justify-content: flex-start;
  }

(in both cases you’ll want to get rid of the -20px margin for the label…)