View Full Version : [FIXED] On android when focus a textfield the app is rescaled

21 Nov 2011, 8:35 AM

Sencha Touch 2 dp2
Browser versions tested against:

Android WebView
DOCTYPE tested against:


If you have a textfield inside a form panel when you tap into it, you will see how all elements of your application get more bigger (2x size). Simply focusing a (text|area)field. Then, you can not back to the standard size until close the app and start it again.
Steps to reproduce the problem:

Create a simple application with a textfield inside a formpanel.
Tap the textfield.
The result that was expected:

The size of your application doesn't change.
The result that occurs instead:

It is like doing a 2x zoom of your app.
Test Case:

name: 'Test',

launch: function() {
Ext.create('Ext.Container', {
layout: 'card',
fullscreen: true,
items: [{
docked: 'top',
xtype: 'button',
text: 'Button'
}, {
xtype: 'formpanel',
items: [{
xtype: 'textfield',
name: 'fieldname',
label: 'Text Label...',
required: false

Should be tested in a android device

HELPFUL INFORMATION Screenshot or Video:

not available
See this URL for live test case:

Debugging already done:

not available
Possible fix:

Im debugging to lookup a solution. If anybody have any hint about this, please tell us.
Additional CSS used:

sencha-touch.css (of dp 1)
Operating System:

Android 2.3 Using the emulator and phisical devices

Jamie Avins
21 Nov 2011, 9:28 AM
Thank you for the report, what Android devices are you seeing this on?

21 Nov 2011, 9:36 AM
I've tested on the emulator, htc desire, htc wildfire, Galaxy II and Galaxy Ace. Ive tested too on Motorola xoom but in it doesn't fail.

The thing is, I've discovered that is an issue of the WebView not related to sencha. Fail with a simple html like this:

<div style="font-size: 1em">Testing...</div>
<input type="text />

Seems its related to the em sizing. I haven't yet more info. But I've solved with the viewport meta:

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