MainUI: position of popover widget

[chris3 (Chris)]

Hey everbody,
i would like to create a List Item Widget with a setting buttom. The setting widgets / items should be shown as a popover. In principal it works, but the popover is always shown in the left corner at the top.

My main List Item Widget Code:

uid: f_rollershutter
tags: []
props:
  parameters:
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 6, 2022, 5:55:04 PM
component: oh-list-item
config:
  icon: =props.icon
  iconUseState: true
  item: =props.item
  label: =props.label
  title: =props.title
slots:
  after:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-link
                  config:
                    action: command
                    actionCommand: UP
                    actionItem: =(props.item)
                    iconColor: gray
                    iconF7: arrow_up_circle
                    iconSize: 25
                    style:
                      --f7-button-padding-horizontal: 0
                      --f7-button-padding-vertical: 0
                      height: 30px
                      width: 30px
                      top: 0
          - component: f7-col
            slots:
              default:
                - component: oh-link
                  config:
                    action: command
                    actionCommand: DOWN
                    actionItem: =(props.item)
                    iconColor: gray
                    iconF7: arrow_down_circle
                    iconSize: 25px
                    style:
                      --f7-button-padding-horizontal: 0
                      --f7-button-padding-vertical: 0
                      height: 30px
                      width: 30px
          - component: f7-col
            slots:
              default:
                - component: oh-link
                  config:
                    action: command
                    actionCommand: STOP
                    actionItem: =(props.item)
                    iconColor: gray
                    iconF7: stop_circle
                    iconSize: 25
                    style:
                      --f7-button-padding-horizontal: 0
                      --f7-button-padding-vertical: 0
                      height: 30px
                      width: 30px
          - component: f7-col
            slots:
              default:
                - component: oh-link
                  config:
                    action: popover
                    actionModal: widget:f_rollershutter_settings
                    actionModalConfig:
                      title: =props.title
                      item: =props.item
                    iconColor: gray
                    iconF7: gear_alt
                    iconSize: 25
                    style:
                      --f7-button-padding-horizontal: 0
                      --f7-button-padding-vertical: 0
                      height: 30px
                      width: 30px

My popover List Widget:

uid: f_rollershutter_settings
tags: []
props:
  parameters:
    - context: item
      description: An item to control 
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 6, 2022, 5:54:49 PM
component: oh-slider-card
config:
  icon: =props.icon
  iconUseState: true
  item: =props.item
  label: =props.label
  title: =props.title

Has somebody an idea what i’m doing wrong?
thank you very much

[JustinG]

The popover is automatically positioned relative to it’s container element. I suspect that by making it a separate widget, instead of defining it inline in the list item widget it’s container becomes the page.

I think the easiest solution is to look around at several of the example widgets in the forum and see how to combine the list item and popover into one widget (many example use popups, but all the fundamentals will be the same).