Header issue - f7-expandable cards with IOS App

Add-ons UIs
1

The expandable card I built does not scale well when using the OpenHAB iOS App.
As below, a card header should be added to move the card below the battery, clock, etc.

I’m wondering how to add a top margin to extendable cards only for IOS app?

IMG_5444
IMG_54441290×2796 311 KB

In Safari Browser it looks better:

Bildschirmfoto 2024-05-20 um 11.45.55
Bildschirmfoto 2024-05-20 um 11.45.55768×1664 86.2 KB

Default Expandable Cards seems to add a header on top of the card to move it below the clock, battery, etc.

IMG_5446
IMG_54461290×2796 270 KB

I tried different f7 css variables as:

  --f7-card-expandable-margin-horizontal
  --f7-card-expandable-margin-vertical

but this didn’t solve the problem.

I tried to use the approach described by @JustinG using expandableOpened
but not sure how to use it without an icon to assign the variable.

Any hint?

2

These are defined with an oh-model-card as the base component. So, you can take a look at that file to see what this does differently from your card. In this case there is some specific styling that relates to the top of the card when the card is opened:

So you can use that as your starting point to work on getting the space you’re looking for. Most likely, your card isn’t taking the --f7-safe-area-top into account.

1 Like