Issue with border for custom widgets as popover in floorplan

Add-ons UIs
,
1

I’m trying to create a widget controlling both brightness and color temperature, to be used as popover from a marker in a floorplan. My issue is that anything more complex than a single card gets issues with the border, as seen in the picture below:
image

I’ve read that the popover size should follow the widget, but something clearly breaks here. The popover borders follow changes in the widget size, so that it’s always a bit too small.

Here is the yaml for the simple widget in the example above:

uid: Dimmer
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 28, 2021, 8:08:11 PM
component: f7-card
config:
  class: lazy
  expandable: false
  style:
    border-radius: 6px
    height: 8.3em
    width: 10em
    noShadow: true
slots:
  default:
    - component: oh-slider-card
      config:
        item: =props.item
        min: 0
        max: 100
        label: true
        scale: false
        noShadow: true
    - component: oh-slider-card
      config:
        item: =props.item
        min: 0
        max: 100
        label: true
        scale: false
        noShadow: true

I’ve searched the forum and tried to dig deeper in yaml and how it’s used in oh, but no luck so far…

Anyone has a similar problem, or can think of a solution?

2

I’m still struggling with this. Seems like an issue many people would face, or perhaps I’m missing something simple?

3

I had nearly the same issue and got a vertical bar. My problem was, i had no height declared. If not necessary, remove height and width from your code:

...
component: f7-card
config:
  class: lazy
  expandable: false
  style:
    border-radius: 6px
    #height: 8.3em
    #width: 10em
    noShadow: true
...

I tested your code with openHAB 3.2.0:
grafik

4

Great!! I still have tiny bar to the right in the more complex widget I’m actually using, but that’s no problem.

Screenshot_20220807-183225
Screenshot_20220807-183225770×284 19.4 KB

Thanks a lot!

5

Today i tried to get familiar with this “new” openHAB UI. I found some example here [OH3] Main UI Examples - #22 by Integer and these are realy nice widget. First i tested Lights and it didn’t worked with the floorplan. Got a vertical bar and overlap on the bottom.

So i modified it and its now working for me with the flooplan. Just add a second f7-card-content with a slider.

grafik

uid: Cell_Light_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - default: lightbulb
      description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 7, 2022, 7:36:21 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : 'var(--f7-card-bg-color)'"
    padding: var(--f7-card-content-padding-horizontal) var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal) var(--f7-card-content-padding-vertical)
    min-width: 120px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          flex-direction: row
          display: flex
          #background-color: red
          padding: 0px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : 'Title'"
              style:
                font-size: 12px
                margin-left: 10px
          - component: oh-toggle
            config:
              item: =props.item_schalter
              style:
                position: absolute
                right: 0px
    - component: f7-card-content
      config:
        style:
          #background-color: purple
          padding: 0px
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                padding: 10px 5px 10px 5px
    - component: f7-card-content
      config:
        style:
          #background-color: green
          padding: 0px 10px 0px 10px
      slots:
        default:
          - component: oh-slider
            config:
              item: =props.item_brightness
              min: 0
              step: 10
              max: 100
              label: true
              unit: "%"
              style:
                --f7-range-bar-size: 8px
                --f7-range-bar-border-radius: 8px
                --f7-range-knob-size: 20px
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)