Alignment in nested objects

[RGroll (Rainer)]

@Ursusprimus

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.

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).

---

@Ursusprimus

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.

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 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

---

@Ursusprimus

Not sure if I understand you correctly, but the popup-window works fine:

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

---

@Ursusprimus

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 isn’t possible currently