Expandable cards on standalone are rendered too far at the top

When installing an F7-app on the home-screen (only tested on iOS 13), expandable cards are rendered too far to the top of the screen (see screenshot below - straight from 5.4.2 kitchen-sink on the F7 homepage)…

How to handle that?

  • should that work ‘out of the box’
  • does it need some special treatment from my side?


You need to add extra padding-top to card-content, or disable hideStatusbarOnOpen card parameter https://framework7.io/docs/cards.html#card-app-parameters

adding these to f7params doesn’t change much - except the statusbar is not hidden :wink:

f7params: {
    card: {
      hideStatusbarOnOpen: false,
      hideNavbarOnOpen: false

Only this parameter should be set

hideNavbarOnOpen seems like doesn’t work as expected

no matter what I set - it always moves the card-header and close-box up (in standalone). On a mobile site it works fine

This works absolutely correct for me when i set app.params.card.hideStatusbarOnOpen = false on KitchenSink installed as home screen app:

Well - I just used:


without modification…

For my other case:
I used the expandable card directly under page-content… after I moved it into a div things work like expected…

thx for the check!