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]