Text overlap, accordionList

Hi,
I’ve written a small widget to select radiostreams and send the URL to a UPnP Renderer. The streams are selected by a ‘Accordion List’. When two of the widgets are positioned on one page, the second header is not overwritten by the first list. I’ve tried different z-index settings, but no success. Any suggestions?

Thanks in advance
Manfred

uid: audio_control_AccordionList
tags: []
props:
  parameters:
    - default: Radio Wohnzimmer Ecke
      description: Überschrift
      label: Überschrift
      name: ueberschrift
      required: false
      type: TEXT
    - context: item
      default: RadioSenderAuswahl
      description: Item, dass die Liste der Radiosender enthält
      label: ItemRadioSenderListe
      name: ItemRadioSenderListe
      required: false
      type: TEXT
    - context: item
      default: Radio_Wohnz_Ecke_D_AktiverSender
      description: Item, das den ausgewählten Sender enthält
      label: ItemSender
      name: itemSender
      required: false
      type: TEXT
    - context: item
      default: Radio_Wohnz_Ecke_D
      description: Prefix des Renderes
      label: ItemRenderer
      name: ItemRenderer
      required: true
      type: TEXT
    - default: page_Radio_Esstisch_03
      description: Page which will be opened as popup
      label: Page ID
      name: page
      required: true
    - context: item
      default: Radio_Wohnz_Ecke_D_Ein
      label: Power Item
      name: powerItem
      required: false
      type: TEXT
    - context: item
      label: Multiroom Control Item
      name: multiroomControlItem
      required: false
      type: TEXT
    - label: Force Dark Theme
      name: darkTheme
      required: false
      type: BOOLEAN
timestamp: Sep 13, 2024, 10:56:01 AM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    class:
      - padding: 0px
    height: 125px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    themeDark: =props.darkTheme
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: oh-image
            config:
              action: popup
              actionModal: ='page:' + props.page
              style:
                display: "=props.ItemRenderer+'_SenderIcon' ? 'block' : 'none'"
                float: left
                height: 70px
                top: 0px
                width: 80px
              url: =items[props.ItemRenderer+'_SenderIcon'].state
          - component: oh-link
            config:
              action: popup
              actionModal: ='page:' + props.page
              style:
                height: 110px
                left: 0px
                position: absolute
                top: 0px
                width: 75%
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - margin-top
                    style:
                      z-index: 2
                      overflow: hidden
                      text-overflow: ellipsis
                      white-space: nowrap
                    text: =props.ueberschrift + " - " + items[props.ItemRenderer+'_Kunstler'].state
                - component: Label
                  config:
                    style:
                      z-index: 2
                      font-size: 20px
                      overflow: hidden
                      text-overflow: ellipsis
                      white-space: nowrap
                    text: =items[props.ItemRenderer+'_Titel'].state
                - component: oh-slider
                  config:
                    color: blue
                    item: =props.ItemRenderer+'_Lautstarke'
                    style:
                      margin-top: 0.5rem
                    visible: =vars.showVolume === true
          - component: f7-block
            config:
              class:
                - display-flex
                - justify-content-center
                - align-items-center
                - no-padding
                - no-margin
              style:
                background: white
                border-radius: 50%
                border-top: 2px solid '#ddd'
                bottom: 10px
                box-shadow: inset 0px 1px 2px '#eee'
                height: 40px
                left: 90%
                position: absolute
                top: 5px
                width: 40px
            slots:
              default:
                - component: f7-block
                  config:
                    class:
                      - no-margin
                    style:
                      background: '=(items[props.powerItem].state === "ON") ? "rgba(124, 252, 0, 0.5)"
                        : "transparent"'
                      border-radius: 50%
                      box-shadow: '=(items[props.powerItem].state === "ON") ? "0 0 20px #fff, 0px 0px
                        30px rgba(0,255,0,0.5)" : "none"'
                      height: 100%
                      position: absolute
                      transform: '=(items[props.powerItem].state === "ON") ? "scale(1,1)" :
                        "scale(0,0)"'
                      transition: transform 0.2s
                      width: 100%
                - component: f7-block
                  config:
                    style:
                      background: rgba(255,255,255,0.8)
                      border-radius: 50%
                      height: calc(100% - 10px)
                      position: absolute
                      width: calc(100% - 10px)
                - component: oh-link
                  config:
                    action: toggle
                    actionCommand: '=(items[props.powerItem].state === "ON") ? "OFF" : "ON"'
                    actionItem: =props.powerItem
                    iconF7: power
                    iconOnly: true
                    iconSize: 17
                    style:
                      backdrop-filter: opacity(88%)
                      background-color: "#f7f7f7"
                      background-image: linear-gradient(135deg, '#f7f7f7', '#e7e7e7')
                      border: solid 2pt white
                      border-radius: 50%
                      box-shadow: 0px 3px 8px
                      color: "#a7a7a7"
                      height: calc(100% - 10px)
                      text-align: center
                      width: calc(100% - 10px)
          - component: f7-block
            config:
              class:
                - display-flex
                - justify-content-center
                - align-items-center
                - no-padding
                - no-margin
              style:
                background: white
                border-radius: 50%
                border-top: 2px solid '#ddd'
                bottom: 10px
                box-shadow: inset 0px 1px 2px '#eee'
                height: 40px
                left: 90%
                position: absolute
                top: 70px
                width: 40px
            slots:
              default:
                - component: oh-link
                  config:
                    action: variable
                    actionVariable: showVolume
                    actionVariableValue: =!(vars.showVolume === true)
                    color: "=(vars.showVolume) ? 'blue' : 'gray'"
                    iconF7: speaker_3_fill
                    iconSize: 18
                    round: true
                    style:
                      margin: 0 0.5em
                    visible: =props.ItemRenderer+'Lautstarke' !== undefined
    - component: f7-block
      config:
        style:
          z-index: 2
          -- f7-card-bg-colons: black
          left: -10px
          position: absolute
          top: 84px
          width: 50%
      slots:
        default:
          - component: oh-list-card
            config:
              accordionList: true
              noBorder: true
              noShadow: true
              outline: false
              style:
                z-index: 2
            slots:
              default:
                - component: oh-list-item
                  config:
                    style:
                      backgroundColor: ="gray"
                      border-radius: 5px
                      color: white
                      transform: scale(1, 0.9)
                    title: Senderauswahl
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          mediaList: false
                          noChevron: true
                          style:
                            width: 50%
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                accordionList: true
                                for: option
                                itemOptions: =props.ItemRadioSenderListe
                                sourceType: itemStateOptions
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      action: command
                                      actionCommand: =loop.option.label
                                      actionItem: =props.itemSender
                                      bgColor: yellow
                                      color: black
                                      fragment: true
                                      icon: =loop.option.label.split(";")[1]
                                      iconUseState: false
                                      listButton: false
                                      style:
                                        color: black
                                      title: =loop.option.label.split(";")[0]

block with the list accordion is placed in f7-card with a height of 125px.

1 Like

z-index would not really be helpful here because any change you make to the z-index of a component in the widget applies to both so the second will still always render on top of the first. It’s possible you could examine the complete html tree and find the component that separates the top of the accordion list from the rest of it and use a stylesheet to target just that with a z-index, but even then, there’s enough default z-index settings from both f7 and oh components that or any other z-index based solution would be a ton of hassle.

If you really want this list to be in an accordion, then (as implied by @sebSmarthome’s answer) you really need the accordion inside a container that will expand along with the accordion to avoid exactly this kind of problem. You might not want that however, because if the card expands then it’s going to result in all the other things on the page to shift in response.

I simply would not choose an accordion setup for this. My first choice for something like this would probably actually be to use an f7 sheet structure. Click on a link on the card to open a sheet overlay with list one it.

The only trick to this approach again comes because you are trying to put two of the same widgets on a page. You will have to build the sheet in the widget with a way to make sure that the sheet from each widget gets a unique class name. The easiest ways to do this are either 1) append one of the widget properties such as the item name itself to the class of the sheet, or 2) use an oh-context to randomly generate a constant value that you can append to the class of the sheet.

1 Like

Thanks for your help. At last I decided to list all icons of the radiostreams in one long row, to avoid any overlap issues.