Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Philippe_B_1
Beginner
96 Views

Page size problem with iframe + keyboard on iOS

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?

Tags (2)
0 Kudos
3 Replies
PaulF_IntelCorp
Employee
96 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.

Diego_Calp
Valued Contributor I
96 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

Maciek_T_
Beginner
96 Views

Hi, 

have you managed to solve this?

Regards,

Maciek

Reply