I’m using some custom widgets on my overview page, which are all expandable cards.
As my system grows i want to reuse some widgets in other widgets t save some code lines.
The first repeater with the toggle items is ok
The list item with the accordion repeater is also ok
The third repeater does as expected but the alignment of the embeded widget looks not so good, see sceenshot
The content of the third repeater produces a space on the left
The content of the accordion repeater is aligned perfect, second sceenshot
Here is my widget code.
uid: beleuchtung_garten_neu_V3
tags: []
props:
parameterGroups: []
timestamp: Nov 22, 2022, 9:32:21 PM
component: f7-card
config:
backdrop: true
class:
- card-expandable-animate-width
expandable: true
style:
--f7-card-expandable-box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.5)
--f7-card-expandable-margin-horizontal: 5px
--f7-card-expandable-margin-vertical: 7px
--f7-card-expandable-tablet-border-radius: 0px
--moz-user-select: none
--ms-user-select: none
--webkit-user-select: none
background: "#32CD32"
height: 54px
width: auto
swipeToClose: true
slots:
default:
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: oh-button
config:
class:
- card-opened-fade-in
- cell-close-button
- card-close
color: black
iconF7: xmark_circle
iconSize: 30px
style:
padding-bottom: 35px
padding-top: 14px
position: absolute
right: 0
top: 0
z-index: 999
- component: f7-block
config:
class:
- no-padding
style:
height: 200px
margin: 0px
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- display-flex
medium: "10"
small: "10"
width: "10"
slots:
default:
- component: f7-icon
config:
material: outdoor_grill
size: 25px
- component: f7-col
config:
class:
- display-flex
- justify-content-space-between
medium: "50"
small: "50"
width: "50"
slots:
default:
- component: Label
config:
text: Garten
- component: Label
config:
text: =items.Hueoutdoortemperaturesensor1_Temperatur.state
- component: f7-col
config:
class:
- display-flex
- justify-content-flex-start
medium: "40"
small: "40"
width: "40"
slots:
default:
- component: f7-icon
config:
color: yellow
f7: lightbulb
size: 25px
visible: "=items.Lights.state === 'ON' ? true : false | items.SwitchAll.state > 0 ? true : false"
- component: f7-list
config:
accordionList: true
slots:
default:
- component: oh-repeater
config:
for: item
fragment: true
groupItem: Lights
sourceType: itemsInGroup
slots:
default:
- component: oh-toggle-item
config:
color: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"'
icon: ='oh:' + loop.item.category
iconUseState: true
item: =loop.item.name
title: =loop.item.label
- component: oh-list-item
config:
accordionList: true
after: =items.SwitchAll.displayState
color: '=(items.SwitchAll.state > 0) ? "yellow" : "gray"'
icon: iconify:mdi:led-strip-variant
iconColor: '=(items.SwitchAll.state > 0) ? "yellow" : "gray"'
title: Alle Led
slots:
accordion:
- component: oh-repeater
config:
for: item
fragment: true
groupItem: SwitchAll
sourceType: itemsInGroup
slots:
default:
- component: f7-list
slots:
default:
- component: widget:Universal_Dimmer_Card
config:
dimmerItem: =loop.item.name
name: =loop.item.label
icon: iconify:mdi:led-strip-variant
- component: f7-list
slots:
default:
- component: oh-repeater
config:
for: item
fragment: true
itemTags: SwitchAll
sourceType: itemsWithTags
slots:
default:
- component: f7-list
slots:
default:
- component: widget:Universal_Dimmer_Card
config:
dimmerItem: =loop.item.name
name: =loop.item.label
icon: iconify:mdi:led-strip-variant
And the widget:Universal_Dimmer_Card
uid: Universal_Dimmer_Card
tags: []
props:
parameters:
- context: Text
description: Title of the card
label: Title
name: name
required: false
type: TEXT
- context: item
description: Dimmer Item
label: Dimmer Item
name: dimmerItem
required: true
type: TEXT
- context: Text
label: OpenHAB-Icon
name: icon
required: true
type: TEXT
timestamp: Nov 21, 2022, 9:10:34 PM
component: f7-card
config:
noShadow: false
padding: false
style:
background: transparent
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.3)
height: auto
margin-left: 5px
margin-right: 5px
padding: 0px
slots:
default:
- component: f7-card-header
config: {}
slots:
default:
- component: oh-icon
config:
height: 55px
icon: =props.icon
style:
color: rgb(106, 106, 106)
margin-bottom: 3%
margin-top: 3%
- component: f7-block
config:
style:
left: 80px
margin-bottom: 3%
margin-top: 3%
position: absolute
slots:
default:
- component: Label
config:
style:
color: black
font-size: 15px
font-weight: 500
text: =props.name
- component: f7-chip
config:
style:
background: orange
color: white
font-size: 15px
font-weight: 500
margin-top: 5px
width: auto
text: '=items[props.dimmerItem].state == 100 ? "ON" : items[props.dimmerItem].state == 0 ? "OFF" : items[props.dimmerItem].displayState + " ON"'
- component: f7-block
config:
style:
display: flex
padding: 0
width: auto
slots:
default:
- component: oh-link
config:
action: command
actionCommand: OFF
actionItem: =props.dimmerItem
iconColor: gray
iconF7: stop_circle
iconSize: 30
style:
background: transparent
z-index: 98
- component: f7-card-footer
config:
style:
background: transparent
border-radius: 0 0 10px 10px
height: auto
slots:
default:
- component: oh-icon
config:
height: 0px
icon: props.icon
style:
color: rgb(106, 106, 106)
margin-top: -4px
- component: f7-block
config:
style:
display: flex
height: auto
justify-content: space-between
left: 10%
padding: 0
position: absolute
width: 80%
slots:
default:
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "20"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state >= 2 && items[props.dimmerItem].state <= 25 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 20
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "30"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state >= 26 && items[props.dimmerItem].state <= 35 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 30
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "50"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state >= 36 && items[props.dimmerItem].state <= 55 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 50
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "60"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state >= 56 && items[props.dimmerItem].state <= 65 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 60
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "80"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state >= 66 && items[props.dimmerItem].state <= 99 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 80
- component: oh-button
config:
color: gray
outline: true
round: true
small: true
action: command
actionCommand: "100"
actionItem: =props.dimmerItem
textColor: '=items[props.dimmerItem].state > 99 ? "yellow" : "gray"'
style:
height: 24px
z-index: 98
text: 100
I’m running out of ideas, any help appreciated, thanks
