[OH3] oh-list-card: Margin / Position

Add-ons UIs
1

Hi all,

I recently ran into the issue, that my list item widgets do not appear properly.

As soon as I embed my f7-list widget into the oh-list-card, the widget is indented, as shown below:
grafik

Even if I add the CSS style property “margin-left” or (absolute position) “left” with a negative offset, the issue cannot be solved.
Using “margin-left” will result in an impure solution that only works on the web page, but this does not affect the page layout on mobile devices.

Do you guys have some ideas to solve this indentation?

My widget code is like:

component: f7-list
config:
  accordionList: true
  mediaList: true
  style:
    margin-left: =props.marginLeft
slots: {}
2

Just based on the name of your component you are adding a complete list and not a list item.

The list is only the frame to have multiple list items included. If you want to build a custom list item maybe choose another component type

3

Okay, that worked out, thank you very much! =)

Now it looks great:

grafik
grafik740×311 11.1 KB 

uid: widget_manualHeatingPhase
tags: []
props:
  parameters:
    - description: Title of the acordion list
      label: Title
      name: title
      required: false
      type: TEXT
    - description: "Icon for the widget elements (e.g.: f7:flame)"
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: 'An array of labels (e.g.: "Bedroom;Livingroom;...")'
      label: Labels
      name: labels
      required: false
      type: TEXT
    - description: 'Color shown if the radiators are on (e.g.: "red,orange,...")'
      label: ON Color
      name: onColor
      required: false
      type: TEXT
    - description: 'Color shown if the radiators are off (e.g.: "gray,blue,...")'
      label: OFF Color
      name: offColor
      required: false
      type: TEXT
    - description: "Minimal temperature which can be set (e.g.: 15)"
      label: Min. Temperature
      name: min
      required: false
      type: TEXT
    - description: "Maximal temperature which can be set (e.g.: 25)"
      label: Max. Temperature
      name: max
      required: false
      type: TEXT
    - context: item
      description: Item(s) holding the set point value
      label: Linked Set Point Item(s)
      name: linkedSetPointItems
      required: true
      type: TEXT
      multiple: true
    - context: item
      description: Item(s) holding the current temperature
      label: Linked Current Temperature Item(s)
      name: linkedCurrentTemperatureItems
      required: true
      type: TEXT
      multiple: true
    - context: item
      description: Item(s) holding the current valve tappet
      label: Linked Valvet Item(s)
      name: linkedCurrentValveTappetItems
      required: true
      type: TEXT
      multiple: true
  parameterGroups: []
timestamp: Oct 10, 2022, 10:32:39 AM
component: oh-list-item
config:
  accordionList: true
  mediaList: true
  icon: f7:flame
  iconColor: gray
  title: =props.title
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
      slots:
        default:
          - component: oh-repeater
            config:
              for: i
              fragment: true
              in: =props.linkedSetPointItems
              sourceType: array
            slots:
              default:
                - component: oh-stepper-item
                  config:
                    buttonsOnly: false
                    fill: true
                    icon: f7:flame
                    iconColor: "=(items[props.linkedCurrentValveTappetItems[loop.i_idx]].state > 0) ? props.onColor : props.offColor"
                    item: =loop.i
                    large: true
                    max: =props.max
                    min: =props.min
                    round: true
                    title: =props.labels.split(";")[loop.i_idx] + " (" + items[props.linkedCurrentTemperatureItems[loop.i_idx]].state + ")"
2 Likes