Alignment in nested objects

I’m trying to left-align a object:


(Actually, I want the title “Eva’s Smartphone” to be a pop-up object, but that doesn’t seem to work; so I’ll delete the title and rename “Graph” to “Eva’s Smartphone”, but then it needs to be to the very left, right next to the network symbol)
I’m not familiar with CSS and tried text-align, horizontal-align but that didn’t work.

What would I need to change in the YAML-code?

component: oh-list-item
config:
  title: Eva-Smartphone
  icon: oh:network
  iconUseState: true
  item: EvaSmartphoneHonor_Online
slots:
  after:
    - component: oh-label-item
      config:
        item: EvaSmartphoneHono_Zuletztgesehen
      slots:
        after:
          - component: oh-list-item
            config:
              listButton: true
              action: popup
              title: Graph
              actionModal: page:z_Eva_Smartphone

I think the problem here is the limitation of the oh specific list and label items. Every (nearly) oh component is just based off of the f7 library of widgets, but with many of the configuration options reduced or set to sensible defaults in order to greatly simplify the process of widget creation. The after slot in these components represents a specific subsection of the widget relative to some of the other subsections, so there’s only so much you can do about alignment within that small subsection. You’ll never get something in the after slot over to that part of the widget because that’s the title slot.

In the oh-list-item you really only have access to three or four of these subsections, but if you look at the f7 documentation for a list item you will see that there are a dozen or so.

At this point, if you want to be able to have that much control over the customization of the list item then you will need to graduate from the oh-list-item to the f7-list-item instead. It mostly just takes a little practice to go from the f7 help docs and the way they lay out properties and list the available slots back to the widget editor yaml. But, with the numerous examples on the forums here, and the work you’ve already done with the widget yaml, you should be able to make the jump.

Once you get comfortable with the more general f7 widgets, then the only practical limitation to what you can configure is the time you care to put into it.

2 Likes

Thanks to your explanation, I got a reasonably good solution by deleting the title and setting width to 0:
image
Now, of course, the time and text is not aligned and vertical-align doesn’t seem to work (I tried on several levels, just to make sure):

component: oh-list-item
config:
  icon: oh:network
  iconUseState: true
  item: EvaSmartphoneHonor_Online
  style:
    width: 0px
    vertical-align: bottom
slots:
  after:
    - component: oh-label-item
      config:
        item: HolgerGalaxyNote8_Zuletztgesehen
        style:
          // background: grey
          vertical-align: bottom
      slots:
        after:
          - component: oh-list-item
            config:
              listButton: true
              action: popup
              title: Eva-Smartphone
              actionModal: page:z_Eva_Smartphone
              style:
                vertical-align: bottom
                width: 50px
            slots: null

While this might be solved easily (if one knows how), I tend to agree with you that getting familiar with f7 might be worth the effort for me.
The f7 documentation seems plausible enough. The biggest obstacle right now is the transformation from f7 to OH (as you indicated it would). I’ll try to tackle it and might be back with more stupid questions :wink:

I’ve played around with f7 a little bit now and made some progress. Using it, the above mentioned problem of vertical alignment doesn’t appear anymore.
However, for some reason it starts a new column:

component: oh-list-card
config:
  title: Titel
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-left
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - align-items-left
                  slots: {}
                - component: oh-list-item
                  config:
                    class:
                      - align-items-left
                    icon: oh:network
                    iconUseState: true
                    item: BennetPC_Online
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          class:
                            - align-items-left
                          listButton: true
                          action: popup
                          title: Bennet-PC
                          actionModal: page:z_BennetPC_Online
                - component: f7-col
                  config:
                    class:
                      - align-items-left
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: BennetPC_Zuletztgesehen

My other problem is the accordion:
when I copy the code above in your accordion example (replace one item), it doesn’t work any more:

component: oh-list-card
config:
  title: This is just the card title not the list widget
  accordionList: true
slots:
  default:
    - component: oh-list-item
      config:
        title: At least one list item must be visible for the list widget to be drawn
      slots:
        accordion:
          - component: oh-list
            config: {}
            slots:
              ? default
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-left
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - align-items-left
                  slots: {}
                - component: oh-list-item
                  config:
                    class:
                      - align-items-left
                    icon: oh:network
                    iconUseState: true
                    item: BennetPC_Online
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          class:
                            - align-items-left
                          listButton: true
                          action: popup
                          title: Bennet-PC
                          actionModal: page:z_BennetPC_Online
                - component: f7-col
                  config:
                    class:
                      - align-items-left
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: BennetPC_Zuletztgesehen
                - component: oh-list-item
                  config:
                    title: B
                - component: oh-list-item
                  config:
                    title: C
                - component: oh-list
                  config:
                    accordionList: true
                    thisDoesNotWork: This list is not rendered because it has no child items and
                      there is nothing to show
                - component: oh-list
                  config:
                    accordionList: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: But you can nest accordions lists as long as there are items to be drawn
                        slots:
                          accordion:
                            - component: oh-list
                              config: {}
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      title: E
                                  - component: oh-list-item
                                    config:
                                      title: F
                                  - component: oh-list-item
                                    config:
                                      title: G


Do you have an explanation/solution for me (again :slight_smile: )?

You have a lot of extra pieces between the oh-list and the f7-list-items. The list items should be direct children (directly in a slot) of the oh-list and then the magic you’re looking for can happen inside the f7-list-item.

Here’s a sample of the sort of things you can do with the f7-list-items

component: oh-list-card
config:
  title: "This card uses f7-list-items in an oh-list: f7-list-items have many slots to choose"
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content-start:
          - component: Label
            config:
              text: CoSt
        content:
          - component: Label
            config:
              text: Co
        inner-start:
          - component: Label
            config:
              text: InSt
        inner:
          - component: Label
            config:
              text: In
        media:
          - component: Label
            config:
              text: M
        before-title:
          - component: Label
            config:
              text: BeTi
        after-title:
          - component: Label
            config:
              text: AfTi
        subtitle:
          - component: Label
            config:
              text: Subti
        text:
          - component: Label
            config:
              text: Text
        header:
          - component: Label
            config:
              text: Head
        footer:
          - component: Label
            config:
              text: Foot
        after-start:
          - component: Label
            config:
              text: AfSt
        after:
          - component: Label
            config:
              text: Af
        title:
          - component: Label
            config:
              text: Ti
    - component: f7-list-item
      slots:
        content-start:
          - component: Label
            config:
              text: Slots are flex aligned by default
        content:
          - component: Label
            config:
              text: So just two slots will appear left and right justified
    - component: f7-list-item
      slots:
        header:
            - component: f7-icon
              config:
                f7: wifi
            - component: Label
              config:
                text: Flex spacing applies inside a slot
        footer:
            - component: f7-icon
              config:
                f7: checkmark_seal
            - component: Label
              config:
                text: So 4 items in 2 slots are evenly spaced
    - component: f7-list-item
      slots:
        header:
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: wifi
                - component: Label
                  config:
                    text: Using f7-rows
        footer:
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: checkmark_seal
                - component: Label
                  config:
                    text: Will help keep items together in a single slot
    - component: f7-list-item
      config:
        accordionItem: true
        title: F7 Accordion items are a little different
      slots:
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: A
                      - component: oh-list-item
                        config:
                          title: B
                      - component: oh-list-item
                        config:
                          title: C

results in:

Note that getting the accordion to work with the f7-list-items is a little more involved because you need to explicitly define the extra layer of the f7-accordion-content component (which is done behind the scenes if you are using the ‘oh-list-items’).

1 Like

Great, that was very helpful!
Now I’m almost there; it works fine within an accordion, too.
The last thing that bothers me is the wasted space when using rows:

How do I change that?

component: oh-list-card
config:
  title: Title
  no-chevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content-start:
          - component: oh-list-item
            config:
              icon: oh:network
              iconUseState: true
              item: HolgerGalaxyNote8_Online
        content:
          - component: oh-list-item
            config:
              listButton: true
              action: popup
              title: Holger-Smartphone
              actionModal: page:z_Holger_Smartphone
        content-end:
          - component: oh-label-item
            config:
              item: HolgerGalaxyNote8_Zuletztgesehen
    - component: f7-list-item
      slots:
        content-start:
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content-start:
                      - component: oh-list-item
                        config:
                          icon: oh:network
                          iconUseState: true
                          item: HolgerGalaxyNote8_Online
                          style:
                            width: 30px
                            align: left
                    content:
                      - component: oh-list-item
                        config:
                          listButton: true
                          action: popup
                          title: Holger-Smartphone xxx
                          actionModal: page:z_Holger_Smartphone
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content-start:
                      - component: oh-label-item
                        config:
                          item: HolgerGalaxyNote8_Zuletztgesehen

And maybe another question, it’s not important for this example but I’m likely to need it later: I tried to make your example above sortable by setting sortable to true, which didn’t work out. Is it in the wrong position or what could I try? If it’s too complicated, don’t bother; I can live without that functionality :wink:

component: oh-list-card
config:
  title: "This card uses f7-list-items in an oh-list: f7-list-items have many
    slots to choose"
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
        sortable: true
      slots:
        content-start:
          - component: Label
            config:
              text: CoSt

I assume that space is a result of the fact that you are trying to pack oh-list-items inside the f7-list-item. Not everything inside the oh-list has to be a list item widget, just each initial child object. In fact, it’s better if you put more basic widgets inside the list items because they have fewer default setting so you have more control. The structure should look like this:

List
  List Item Widget #1
    Any basic widget you want #1.1
    Any basic widget you want #1.2
  List Item Widget #2
    Any basic widget you want #2.1
    Any basic widget you want #2.2

The oh-list-items have some formatting that I don’t think you can override. If you look through the components reference page, you’ll see that it’s subdivided into system widgets, card, list widgets, etc. Each of these groups have different intended uses. The system widgets at the top are the most basic with the least default formatting so you could use those to have more control or the f7 equivalent to have the most control.

So for your case, you could replace the first oh-list-item that you’re using for the network icon with an oh-icon widget or the f7 equivalent (f7 icons can be found here), the only difference for the f7 is instead of a simple iconUseState property that’s built into the oh-icon, you’d have to manually define the change icon color based on the item state.

You could replace the second oh-list-item with an oh-button widget. etc.

I’ve never tried to use the sortable option, but I don’t think you can have both the sortable and the accordion, I think you have to choose one or the other.

Should be very simple, but I just don’t get it to work: Just the last 3 lines are relevant; I changed the item to a very simple oh-icon but it doesn’t appear …

component: oh-list-card
config:
  title: Title
  no-chevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content-start:
          - component: oh-list-item
            config:
              icon: oh:network
              iconUseState: true
              item: HolgerGalaxyNote8_Online
        content:
          - component: oh-icon
            config:
              icon: oh:network

Strangely, if I change the icon-setting from “oh:network” to “network” the symbol is shown (not surprisingly the flexibility (on/off-colors) is lost). So it seems to have something to do with the icon-name? I don’t understand this behavior …

You are correct, with the Oh icon widget you leave off the “oh:” prefix.

To get it to respond to an item state the oh-icon widget has its own state: property which you have to set using an expression and the items object:

- component: oh-icon
  config:
    icon: network
    state: =items["HolgerGalaxyNote8_Online"].state
1 Like

We’re almost there :wink:

I got the left part to be aligned as intended. The right part is still resisting …


I tried to get rid off the list-items where possible. But the one in line 36 (- component: f7-list-item) seems to be necessary.

component: oh-list-card
config:
  title: Title
  no-chevron: true
slots:
  default:
    - component: f7-list-item
      slots:
        content-start:
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content-start:
                      - component: oh-icon
                        config:
                          icon: network
                          state: =items["HolgerGalaxyNote8_Online"].state
                          action: popup
                          actionModal: page:z_Holger_Smartphone
                          style:
                            width: 25px
                    content:
                      - component: oh-label-item
                        config:
                          listButton: true
                          action: popup
                          title: Holger-Smartphone xxx
                          actionModal: page:z_Holger_Smartphone
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-label-item
                        config:
                          item: HolgerGalaxyNote8_Zuletztgesehen

Hey @Ursusprimus

tl;dr:

Use --f7-safe-area-right: 0 on the surrounding f7-list-item to get rid of the space


Some general informations to the already very good recommendations that @JustinG gave you.

  • Try to avoid using f7-row / f7-col components inside your f7-/oh-list-item components as they might mess up the intended structure of the component on some devices.

  • You can’t use action properties on the oh-icon component - so these shouldn’t work:

    state: =items["HolgerGalaxyNote8_Online"].state
    action: popup
    actionModal: page:z_Holger_Smartphone
    
  • To add the accordion and sortable option to a list component, you’ve to add these props to your root oh-/f7-list component:

    accordionList: true
    sortable: true
    sortableMoveElements: true
    sortableEnabled: true
    

    Be aware that these sorting won’t get saved out-of-the-box and will be lost after reloading the page (due to the fact, that you hardcoded the order of the components inside the YAML)

    There should be ways to save the order as an item-state (and using the oh-repeater to dynamically build up the list from these saved informations), but this is a bit more advanced and currently does not seem to work as there is a bug in the oh/f7-list-item components, which makes sorting impossible in combination with the oh-repeater.

Thank you, Rainer.

I don’t know where to put the proposed “–f7-safe-area-right: 0”. I tried to put it in line 8 which didn’t work and then a few others just to make sure, but no success either.

component: oh-list-card
config:
  title: Title
  no-chevron: true
slots:
  default:
    - component: f7-list-item
      --f7-safe-area-right: 0
      slots:
        content-start:
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content-start:
                      - component: oh-icon
                        config:
                          icon: network
                          state: =items["HolgerGalaxyNote8_Online"].state
                          action: popup
                          actionModal: page:z_Holger_Smartphone
                          style:
                            width: 25px
                    content:
                      - component: oh-label-item
                        config:
                          listButton: true
                          action: popup
                          title: Holger-Smartphone xxx
                          actionModal: page:z_Holger_Smartphone
          - component: f7-row
            slots:
              default:
                - component: f7-list-item
                  --f7-safe-area-right: 0
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-label-item
                        config:
                          item: HolgerGalaxyNote8_Zuletztgesehen

Thanks for your other tips, too:

  • Don’t I need the f7-row/col components for alignment reasons? The symbol and name should be next to each other on the left, the date/time on the right. Before, I had the problem that they were evenly spaced.
  • Not sure if I understand you correctly, but the popup-window works fine:
  • sorting: that’s interesting and worked immediately (due to my lack of experience it usually takes me several tries to get something running in openhab …). However, I originally thought of an automatic sorting; e.g. click on a button and then the list would be sorted by date/time or alphabetically. But that’s not really important to me at the moment and probably quite difficult to achieve.

This is a css variable given from the underlying framework, so you have to put this inside the style: part of your component. As you want to remove the space of the right element, the second f7-list-item would be the right one (line 38 in your example).


You could do that but there a other ways to achieve your goal with less code and a bit more robust. For example, something like this should work (you have to put in your actions, item states and so on obviously):

accordion

Accordion List with action components (YAML)
uid: accordion_list_example-f7
component: oh-list-card
config:
  accordionList: true
  noChevron: true
  title: Some title
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-button
            config:
              color: gray
              class:
                - no-padding
                - display-flex
                - justify-content-flex-start
              style:
                overflow: hidden
                color: var(--f7-block-text-color)
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: network
                    style:
                      width: 25px
                    class:
                      - margin-right-half
                - component: Label
                  config:
                    text: Title
                    style:
                      font-weight: normal
                      text-overflow: ellipsis
                      overflow: hidden
        after:
          - component: oh-button
            config:
              text: =dayjs().format('DD.MM - HH:mm')
              color: gray
              class:
                - no-padding
              style:
                font-weight: normal
                color: var(--f7-block-text-color)
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-card-content
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Some content

    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-button
            config:
              color: gray
              class:
                - no-margin
                - no-padding
                - display-flex
                - justify-content-flex-start
              style:
                overflow: hidden
                color: var(--f7-block-text-color)
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: qualityofservice
                    style:
                      width: 25px
                    class:
                      - margin-right-half
                - component: Label
                  config:
                    text: Another title
                    style:
                      font-weight: normal
                      text-overflow: ellipsis
                      overflow: hidden
        after:
          - component: oh-button
            config:
              text: =dayjs().add(4,'hour').format('DD.MM - HH:mm')
              color: gray
              class:
                - no-padding
              style:
                font-weight: normal
                color: var(--f7-block-text-color)
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-card-content
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Some more content

The oh-icon component have no action slots - the behaviour you see is presumably coming from the oh-label-item below (starting at line 28) and not from the icon.

- component: oh-icon
  config:
    icon: network
    state: =items["HolgerGalaxyNote8_Online"].state
    action: popup
    actionModal: page:z_Holger_Smartphone

This isn’t possible currently

2 Likes

Very nice, thank you. I’ll dig into that and should get an appealing solution soon :slight_smile:

I took much longer than I had initially expected, but now I’m finally there :slight_smile: Special thanks to @JustinG and @RGroll - you were very patient with me …
Here’s the result which looks quite nice:


It’s got drop-down fields, variable icons, well aligned objects within the drop-down field and opens graphs (nothing really spectacular for the OH-pros but for a beginner like me quite satisfactory).

Only one thing that’s a little strange: in the first line there’s a “-” and I can’t seem to get rid off it, but it’s hard to see anyway.

In case some other beginner is interested, here’s the code (ignore the end, it’s just repetitive with different items):

component: oh-list-card
config:
  accordionList: true
  noChevron: true
slots:
  default:
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-label-item
            config:
              title: Geräte Online?
              icon: oh:network
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["HolgerGalaxyNote8_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Holger-Smartphone
                                listButton: true
                                action: popup
                                actionModal: page:z_Holger_Smartphone
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.HolgerGalaxyNote8_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["HolgerGamingPC_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Holger-PC
                                listButton: true
                                action: popup
                                actionModal: page:z_HolgerGamingPC
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.HolgerGamingPC_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["HolgerMacBookPro_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Holger-Mac
                                listButton: true
                                action: popup
                                actionModal: page:z_HolgerMacBookPro
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.HolgerMacBookPro_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["BennetSmartphone_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Bennet-Phone
                                listButton: true
                                action: popup
                                actionModal: page:z_BennetSmartphone_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.BennetSmartphone_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["BennetPC_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Bennet-PC
                                listButton: true
                                action: popup
                                actionModal: page:z_BennetPC_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.BennetPC_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["EvaSmartphoneHonor_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Eva-Phone
                                listButton: true
                                action: popup
                                actionModal: page:z_EvaSmartphoneHonor_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.EvaSmartphoneHonor_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["EvaMariasMacBookPro_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Eva-Mac
                                listButton: true
                                action: popup
                                actionModal: page:z_EvaMariasMacBookPro_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.EvaMariasMacBookPro_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["FelixSmartphone_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: Felix-Phone
                                listButton: true
                                action: popup
                                actionModal: page:z_FelixSmartphone
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.FelixSmartphone_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["EvasaltesNotebookFELIX_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: FelixEva-PC
                                listButton: true
                                action: popup
                                actionModal: page:z_EvasaltesNotebookFELIX_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.EvasaltesNotebookFELIX_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["FireTV_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: FireTV-Wohn
                                listButton: true
                                action: popup
                                actionModal: page:z_FireTV_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.FireTV_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["XBox1_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: XBox1
                                listButton: true
                                action: popup
                                actionModal: page:z_XBox1_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.XBox1_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)
                - component: f7-list-item
                  config:
                    accordionItem: true
                  slots:
                    content:
                      - component: oh-button
                        config:
                          color: gray
                          class:
                            - no-padding
                            - display-flex
                            - justify-content-flex-start
                          style:
                            overflow: hidden
                            color: var(--f7-block-text-color)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: network
                                state: =items["NASArndt_Online"].state
                                style:
                                  width: 25px
                                class:
                                  - margin-right-half
                            - component: oh-label-item
                              config:
                                title: NAS
                                listButton: true
                                action: popup
                                actionModal: page:z_NASArndt_Online
                                style:
                                  font-weight: normal
                                  text-overflow: ellipsis
                                  overflow: hidden
                    after:
                      - component: oh-button
                        config:
                          text: =items.NASArndt_Zuletztgesehen.displayState
                          color: gray
                          class:
                            - no-padding
                          style:
                            font-weight: normal
                            color: var(--f7-block-text-color)

Simple fix - change oh-label-item (line 12) to oh-list-item and you should be fine.

One last recommendation how your code could be drastically minimized and making maintaining a lot easier - have a look into the oh-repeater component.

To give you a starting point here, I attached an example based on your code:

uid: someWidget
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: Geräte Online?
              icon: oh:network
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: oh-repeater
                  config:
                    sourceType: array
                    for: devices
                    in:
                      - icon: network
                        iconState: HolgerGalaxyNote8_Online
                        title: Holger-Smartphone
                        action: page:z_Holger_Smartphone
                        afterState: HolgerGalaxyNote8_Zuletztgesehen
                      - icon: oil
                        iconState: HolgerGamingPC_Online
                        title: Holger-PC
                        action: page:z_HolgerGamingPC
                        afterState: HolgerGamingPC_Zuletztgesehen
                      - icon: qualityofservice
                        iconState: HolgerMacBookPro_Online
                        title: Holger-Mac
                        action: page:z_HolgerMacBookPro
                        afterState: HolgerMacBookPro_Zuletztgesehen
                    fragment: true
                  slots:
                    default:
                      - component: f7-list-item
                        config:
                          accordionItem: true
                        slots:
                          content:
                            - component: oh-button
                              config:
                                color: gray
                                class:
                                  - no-padding
                                  - display-flex
                                  - justify-content-flex-start
                                style:
                                  overflow: hidden
                                  color: var(--f7-block-text-color)
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: =loop.devices.icon
                                      state: =items[loop.devices.iconState].state
                                      style:
                                        width: 25px
                                      class:
                                        - margin-right-half
                                  - component: oh-label-item
                                    config:
                                      title: =loop.devices.title
                                      listButton: true
                                      action: popup
                                      actionModal: =loop.devices.action
                                      style:
                                        font-weight: normal
                                        text-overflow: ellipsis
                                        overflow: hidden
                          after:
                            - component: oh-button
                              config:
                                text: =items[loop.devices.afterState].displayState
                                color: gray
                                class:
                                  - no-padding
                                style:
                                  font-weight: normal
                                  color: var(--f7-block-text-color)

Which you can slim down even more by using another sourceType for the oh-repeater - but just try it out and find what fit your needs. Happy tinkering! :slight_smile:

2 Likes

This is very nice! Can’t say I understand all of it but probably enough to transfer this idea to similar problems - I hope :wink: