Software Archive
Read-only legacy content
17061 Discussions

Page size problem with iframe + keyboard on iOS

Philippe_B_1
Beginner
363 Views

Hi,

I've made an HTML5+Cordova application (started from XDK-app-designer; using App Framework 3; last version compiled with Intel XDK 3491).

My app has a title and a navigation bar. I have an iframe containing a web tool to calculate a public transport route:

The problem is on iOS only : when the keyboard is opened everything's fine (both the title and the navigation bars are hidden and they show up again if I close the keyboard without doing anything else):

But as soon as I start typing my app's page is shrinked to the height of the screen minus the height of the keyboard, and the title and navigation bars appear and remain there on all pages:

      

My viewport meta tage is:

<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1, maximum-scale=1, initial-scale=1, user-scalable=no">

I'm lost... Does anybody know what's happening?

0 Kudos
3 Replies
PaulF_IntelCorp
Employee
363 Views

Try using the Ionic keyboard plugin. I believe it has some settings to help resolve these sorts of issues. Refer to the plugin's documentation for help.

0 Kudos
Diego_Calp
Valued Contributor I
363 Views

Hi,

Try putting this values on your iframe-size style properties:

Width: 100vw

Height: 100vh

I tested it in App Preview on iPhone 5S.

Regards

Diego

0 Kudos
Maciek_T_
Beginner
363 Views

Hi, 

have you managed to solve this?

Regards,

Maciek

0 Kudos
Reply