Hello everyone,
I am working on a custom Light Control widget (Cell_Light_Card_Swiper_Bold) and I’m struggling to reduce the total height of the pop-up. Even when I try to adjust the components, the pop-up container seems to stay at a fixed height rather than hugging the content.
How can I force the pop-up to use an “auto” height based on the elements inside?
Here is the YAML I am currently using, including my attempts to tighten the margins and set the height:
uid: Cell_Light_Card_Swiper_Bold
tags:
- "2026"
props:
parameters:
- description: Name der Lampe
label: Header
name: header
required: false
type: TEXT
- description: Großes Haupt-Icon rechts
label: Big Bulb Icon
name: big_icon
required: false
type: TEXT
- context: item
label: Schalter Item (Gruppe)
name: item_schalter
required: false
type: TEXT
- context: item
label: Helligkeit Item
name: item_brightness
required: false
type: TEXT
- context: item
label: Farbtemperatur Item
name: item_colortemp
required: false
type: TEXT
- context: item
label: Farbwahl Item (RGB)
name: item_color
required: false
type: TEXT
timestamp: Feb 6, 2026, 3:00:00 PM
component: oh-context
config:
constants:
widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
slots:
default:
- component: oh-swiper-card
config:
paginationDynamic: true
params:
nested: true
noSwiping: true
noSwipingSelector: .range-slider, .range-knob, .oh-slider
touchStartPreventDefault: false
showNavigation: false
showPagination: true
style:
background-color: white
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.12)
height: 9.375rem
margin: 0.3125rem
slots:
default:
# --- SEITE 1: HAUPTSTEUERUNG ---
- component: f7-block
config:
style:
display: flex
flex-direction: row
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-block
config:
style:
display: flex
flex: 1
flex-direction: column
gap: 0.8em
margin: 0
padding: 0
slots:
default:
- component: f7-block
config:
style:
align-items: center
display: flex
justify-content: space-between
margin-top: 0.5em
padding: 1em
slots:
default:
- component: Label
config:
style:
font-size: 1.3em
font-weight: 700
max-width: 75%
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
text: "=props.header ? props.header : 'Licht'"
- component: oh-toggle
config:
item: =props.item_schalter
style:
transform: scale(0.8)
- component: oh-slider
config:
item: =props.item_brightness
style:
--f7-range-bar-size: 0.4em
--f7-range-knob-size: 1.2em
width: 90%
- component: f7-block
config:
style:
align-items: flex-end
display: flex
flex-direction: column
width: 25%
padding: 0.5em
slots:
default:
- component: oh-button
config:
color: gray
iconF7: ellipsis_vertical
iconSize: 1.2em
popupOpen: =`.popup-${const.widgetID}`
style:
border: none
- component: f7-icon
config:
f7: "=props.big_icon ? props.big_icon : 'lightbulb_fill'"
size: 3.5em
style:
color: "=(items[props.item_schalter].state === 'ON') ? '#FFD700' : '#E0E0E0'"
filter: "=(items[props.item_schalter].state === 'ON') ? 'drop-shadow(0px 0px 0.4em #FFD700)' : 'none'"
# --- SEITE 2: SCHNELL-PRESETS ---
- component: f7-block
config:
style:
display: flex
flex-direction: column
padding: 1.5em
slots:
default:
- component: Label
config:
text: Schnellwahl Helligkeit
style:
font-weight: 600
margin-bottom: 0.5em
- component: f7-row
slots:
default:
- component: oh-button
config:
text: 30%
action: command
actionItem: =props.item_brightness
actionCommand: 30
outline: true
- component: oh-button
config:
text: 70%
action: command
actionItem: =props.item_brightness
actionCommand: 70
outline: true
- component: oh-button
config:
text: MAX
action: command
actionItem: =props.item_brightness
actionCommand: 100
fill: true
# --- POPUP SETTINGS ---
- component: f7-popup
config:
backdrop: true
class: =`popup-${const.widgetID}`
closeByBackdropClick: true
swipeToClose: true
style:
--f7-popup-width: 320px
--f7-popup-tablet-width: 320px
slots:
default:
- component: f7-page
config:
style:
background: "#f2f2f7"
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-direction: column
gap: 12px
padding: 16px
slots:
default:
- component: Label
config:
text: EINSTELLUNGEN
style:
font-size: 0.75rem
font-weight: 800
opacity: 0.5
letter-spacing: 0.1em
# Brightness Card
- component: f7-block
config:
style:
background: white
border-radius: 1rem
padding: 1rem
margin: 0
slots:
default:
- component: Label
config:
text: Helligkeit
style:
font-weight: 700
margin-bottom: 8px
- component: oh-slider
config:
item: =props.item_brightness
# Warmth & Color Card
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-block
config:
style:
background: white
border-radius: 1rem
padding: 1rem
height: 100%
slots:
default:
- component: Label
config:
text: Warmweiß
style:
font-weight: 700
- component: oh-slider
config:
item: =props.item_colortemp
- component: f7-col
slots:
default:
- component: f7-block
config:
style:
background: white
border-radius: 1rem
padding: 1rem
display: flex
flex-direction: column
align-items: center
slots:
default:
- component: oh-colorpicker
config:
item: =props.item_color
modules:
- wheel
openIn: popover
- component: Label
config:
text: Farbe
style:
font-weight: 700
margin-top: 4px
# Accordion für Einzellampen
- component: f7-list
config:
accordionList: true
noHairlines: true
style:
margin: 0
slots:
default:
- component: f7-list-item
config:
accordionItem: true
title: Einzelne Lampen
style:
background: white
border-radius: 1rem
font-weight: 600
slots:
accordion:
- component: f7-accordion-content
slots:
default:
- component: f7-list
slots:
default:
- component: oh-toggle-item
config:
title: Lampe Links
item: Lampe_Links_Toggle
- component: oh-toggle-item
config:
title: Lampe Rechts
item: Lampe_Rechts_Toggle
- component: f7-button
config:
text: SCHLIESSEN
popupClose: true
fill: true
style:
border-radius: 0.75rem
height: 3rem
margin-top: 1rem
Does anyone have a tip on which CSS variable specifically controls the container height for oh-popover or oh-dialog to prevent that extra white space at the bottom?
Thanks in advance!