If you wonder why f7-popup does not appear where exepected on an iPad

Add-ons UIs
1

Just wanted to share this information as it gave me some headaches…
The code below creates a 300px x 300px popup in the middle of your screen.
However, this does NOT work on iPad devices (Safari and Chrome).

component: oh-button
config:
slots:
  default:
    - component: f7-popup
      config:
        style:
          position: absolute
          left: ='calc(' + screen.viewAreaWidth + 'px / 2 - 150px)'
          top: ='calc(' + screen.viewAreaHeight + 'px / 2 - 150px)'
          width: 300px
          height: 300px

The reason is that on iPad devices a margin of -315px is set around the popup.
So you simply need to add

margin: 0

to your f7-popup style.
Don’t ask me why - but if anybody knows please tell us.

1 Like