View Full Version : iPad Virtual Keyboard Messes with Layout During Orientation Change

8 Apr 2011, 2:43 PM
Sencha Touch version tested:


custom css (sink.css)

Platform tested against:

iOS 3.2 - ipad (sim and real) and iphone 4 sim
iOS 4 - ipad (sim and real) and iphone 4 sim
Android 2.1 - tested, and this bug does not afect Android
Android 2.2 - tested, and this bug does not afect Android


When any form (floating or fullscreen) is active and the iPad virtual keyboard is shown, Sencha Touch does not resize correctly, including masking out parts of a floating form occasionally.

Test Case:

Easily reproduced in the online kitchen sink code, and the code in the 1.1.0 download

See this URL : http://dev.sencha.com/deploy/touch/examples/kitchensink/

Steps to reproduce the problem:

on iPad navigate to kitchen sink demo
-> User Interface -> Forms
touch in a text field, like Password
iPad virtual keyboard displays on screen
Rotate the ipad
Marvel in the awesome fail

The result that was expected:

Sencha correctly resizes ignoring the overlayed iPad keyboard
Relatedly - I expect the floating 'Source' panel to behave correctly

The result that occurs instead:

The screen resizes ish but appears to set dimensions based on the previous orientation
When Startig in landscape, bring up the virtual keyboard and the rotating to portrate, the layout includeds a blank area above the keyboard, then dismissing the keyboard leavs a big white area
Notice too how the 'Source' panel affects the resizing during an orientation change

Screenshot or Video:

None attached - readily reproduced.

Debugging already done:

No code debugging inside sencha touch, lots of coding by coincidence attepmts at config combinations

Possible fix:

Suggested areas of investigation rathere than a fix: code tht decides orientation, and whatever code measures viewport dimaensions.

9 Apr 2011, 2:35 AM
Apologies - I thought I had only saved as draft yesterday - now with full details

11 Apr 2011, 8:46 AM
Some debugging -

Viewport.getSize and other functions use window.innerHeight - and this is (amazingly) affected by the virtual keyboard - so the layout geometry is always affected by the virtual keyboards.

also tested on iphone.

13 Sep 2011, 10:43 AM
I would like to see some workaround until the next version... :-(