Width of 2 objects in f7-accordion

Add-ons UIs
1

I’m trying to organanize my lights within an accordion. In every row I’d like a colorpicker object and a toggle-card. Basically like this:
image
The obvious problem is that the colorpicker-card is just as wide as its title and the rest (red part in picture) remains unused.

component: oh-list-card
config:
  accordionList: true
  noChevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: Beleuchtung
              icon: oh:lightbulb
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-colorpicker-card
                        config:
                          sliderLabel: true
                          sliderValue: true
                          item: LeuchteHuegross_Farbe
                          title: Licht Holger
                          style:
                            width: 400px
                      - component: oh-toggle-card
                        config:
                          item: EsszimmerWein

Setting width has no effect.

I tried around, without success, e.g. a code like this

component: oh-list-card
config:
  accordionList: true
  noChevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: Beleuchtung
          - component: oh-list-item
            config:
              title: Anzahl Leuchten an
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-colorpicker-card
                  config:
                    sliderLabel: true
                    sliderValue: true
                    item: LeuchteHuegross_Farbe
                    title: Licht Holger
                - component: oh-label-item
                  config:
                    text: right side

doesn’t show the second object:
image

Probably a simple change, but as I’m still somewhat unfamiliar with these objects, I don’t find it and would appreciate your help.

2

This is a scenario where splitting the accordion-content into 2 columns is useful. And you don’t need the accordionItem: true at every component

uid: widget_68c93b0a19
props:
  parameterGroups: []
  parameters:
    - name: prop1
      label: Prop 1
      type: TEXT
      description: A text prop
    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control
tags: []
component: oh-list-card
config:
  noChevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: Beleuchtung
              icon: oh:lightbulb
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  slots:
                    content:
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              slots:
                                default:
                                  - component: oh-colorpicker-card
                                    config:
                                      sliderLabel: true
                                      sliderValue: true
                                      item: LeuchteHuegross_Farbe
                                      title: Licht Holger
                                      style:
                                        width: 400px
                            - component: f7-col
                              slots:
                                default:
                                  - component: oh-toggle-card
                                    config:
                                      item: EsszimmerWein
3

Thank you again, Rainer. This is much better already. So the colorpicker and the toggle item seem to share the entire space evenly. I changed the column width to 80 and 20 - and now it’s even better:
image

Next I’ll try to get all lights into the list by using the array/repeater-version you showed me …