UI Widgets - Trying to prevent cards below an Accordion List card displaying over an expanded list

Setup, Configuration and Use Widgets
1

On my overview page I have a single custom widget that summerises my battery states (group gBattery) and any warnings or alerts (group gAlerts). These are accordion lists that expend to provide further details.

When the accordion list expands,the card below, in this case my garbage collection days, shows over the top of the acccordian dropdown. I have tried setting the accordion dropdown to a black non-transparant background but that does not appear to work.

I am assuming that this is occuring because the widget is higher up on my overview page but cannot find a solution. Any advice would be most welcome

image
image761×572 27.1 KB

image
image718×857 56.7 KB

uid: cardAlerts
tags:
  - overview:card
props:
  parameters:
    - default: Battery states
      description: Headline text for Dropdown
      label: Headline text for Dropdown
      name: headline1
      required: true
      type: TEXT
    - context: item
      default: gBattery
      description: state of all batteries in the system
      label: Item which store the count of desired state
      name: itemBattery
      required: true
      type: TEXT
    - context: item
      default: gAlerts
      description: listing of all alerts in the system
      label: Item which store the count of desired state
      name: itemAlerts
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Sep 21, 2023, 3:20:44 PM
component: f7-card
config:
  outline: true
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-color: "=(items[props.itemAlerts].state == 0) ? '' : (items[props.itemAlerts].state == 1) ? 'yellow' : 'red'"
    border-radius: var(--f7-card-expandable-border-radius)
    border-width: 1px
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 120px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  default:
    - component: oh-list-card
      config:
        accordionList: true
        simpleList: false
      slots:
        default:
          - component: oh-list-item
            config:
              after: =items[props.itemBattery].displayState
              icon: oh:battery
              iconUseState: true
              item: =props.itemBattery
              style:
                --f7-card-bg-color: black
                font-size: 12px
                margin-top: 0px
              title: =props.headline1
              transparent: false
            slots:
              accordion:
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: false
                    noShadow: false
                    outline: true
                    transparent: false
                    style:
                      --f7-card-bg-color: black
                  slots:
                    default:
                      - component: oh-list-card
                        config:
                          accordionList: true
                          background: red
                          noBorder: true
                          noShadow: true
                          outline: true
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: index1
                                fragment: true
                                groupItem: =[props.itemBattery]
                                sourceType: itemsInGroup
                                transparent: false
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      after: =Number.parseInt(loop.index1.state) +' %'
                                      icon: oh:battery
                                      iconUseState: true
                                      item: =loop.index1.name
                                      style:
                                        backgroundColor: black
                                        transparent: false
                                      title: =loop.index1.label
    - component: oh-list-card
      config:
        accordionList: true
        simpleList: false
      slots:
        default:
          - component: oh-list-item
            config:
              icon: "=(items[props.itemAlerts].state == 0) ? 'f7:exclamationmark_triangle' : 'f7:exclamationmark_triangle_fill'"
              iconColor: "=(items[props.itemAlerts].state == 0) ? 'gray' : (items[props.itemAlerts].state == 1) ? 'yellow' : 'yellow'"
              iconUseState: true
              item: =props.item1
              style:
                --f7-card-bg-color: black
                font-size: 12px
                margin-top: 0px
              title: "=(items[props.itemAlerts].state == 0) ? 'No Warning or Alerts' : (items[props.itemAlerts].state == 1) ? 'Alerts Active' :'Warning Active'"
            slots:
              accordion:
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: false
                    noShadow: false
                    outline: true
                  slots:
                    default:
                      - component: oh-list-card
                        config:
                          accordionList: true
                          noBorder: true
                          noShadow: false
                          outline: true
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                filter: items[loop.index2.name].state != 0
                                for: index2
                                fragment: true
                                groupItem: =[props.itemAlerts]
                                sourceType: itemsInGroup
                                style:
                                  backgroundColor: "=props.bgcolor ? 'blue' : 'darkGray'"
                                  transparent: false
                                transparent: false
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      action: command
                                      actionCommand: "0"
                                      actionItem: =loop.index2.name
                                      icon: "=(loop.index2.state == 0) ? 'f7:exclamationmark_triangle' : 'f7:exclamationmark_triangle_fill'"
                                      iconColor: "=(loop.index2.state == 0) ? 'gray' : (items[props.itemAlerts].state == 1) ? 'yellow' : 'yellow'"
                                      iconUseState: true
                                      item: =loop.index2.name
                                      noChevron: true
                                      style:
                                        backgroundColor: "=props.bgcolor ? 'blue' : 'black'"
                                        transparent: false
                                      title: =loop.index2.label
2

You have a lot of extra pieces due to components that are not quite the correct versions for your needs. See this section of the docs for a brief explanation of the different types of components.

In short, once you have a any -card component it doesn’t make sense, most of the time, to put another -card inside that first one. That just ends up with extra elements and styling that interfere.

So, first of all, you’ll probably have better luck in the end if you split the two list cards cards into separate widgets. If, however, you really want the two list cards to be part of the same widget, then don’t make the f7-card the root component for the widget. Use something like an f7-block instead (with little to no additional styles).

Within the top list item itself you will want to also add accordionItem: true which should improve the function of the accordion fold out.

The accordion itself has two nested oh-list-card components, which I suspect is not really what you intended. So, again, here you would just use an oh-list not an oh-list-card and you only need one of them.

3

Many thanks Justin,
Very helpful in understanding better how the elements fit together. I have very much simplified the code using your guidance and the accordion expansion now pushes down the cards below. I also found In the initail code I had a height style constraint that was a contributing cause of my problem. Whilst this is quite suitable for my needs, I would be interested to know it were possible for an accordion list to expand over a card below rather than pushing subsequent cards down, which was my initial intent.

uid: cardAlerts
tags:
  - overview:card
props:
  parameters:
    - default: Battery states
      description: Headline text for Dropdown
      label: Headline text for Dropdown
      name: headline1
      required: true
      type: TEXT
    - context: item
      default: gBattery
      description: state of all batteries in the system
      label: Item which store the count of desired state
      name: item1
      required: true
      type: TEXT
    - context: item
      default: gAlerts
      description: listing of all alerts in the system
      label: Item which store the count of desired state
      name: itemAlerts
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 19, 2023, 9:40:36 AM
component: f7-block
slots:
  default:
    - component: oh-list
      config:
        accordionList: true
      slots:
        default:
          - component: oh-list-item
            config:
              after: =items[props.item1].displayState
              icon: oh:battery
              iconUseState: true
              item: =props.item1
              title: =props.headline1
              transparent: false
            slots:
              accordion:
                      - component: oh-list
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: index1
                                fragment: true
                                groupItem: =[props.item1]
                                sourceType: itemsInGroup
                                transparent: false
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      after: =Number.parseInt(loop.index1.state) +' %'
                                      icon: oh:battery
                                      iconUseState: true
                                      item: =loop.index1.name
                                      style:
                                        backgroundColor: black
                                        transparent: false
                                      title: =loop.index1.label
4

Oh, sorry. I thought the question was how to get it to not overlap.

To be honest, I’m not entirely sure how what you had in the first place did that.

I would use a stylesheet to set the position of the accordion panel to absolute so that it doesn’t push the other elements around. Then you’ll probably want to specify a width of that element as well since it won’t be forced to full width by the container anymore. So to your f7-block at the top you’d add:

component: f7-block
config:
  stylesheet: >
    .accordion-item-content {
      position: absolute;
      width: 100%;
    }