Question

I’m working on a Sencha Touch 2 application where I have a view which is pretty much like this :

When the field is tapped the keyboard goes up as well as the viewport in order to center the field in the available space left.

Now what I would like to do is to translate the viewport down when the field is tapped so that the user can still see the picture entirely.

What I did is create a CSS class that contains the following :

@include transform(translate(0, 55px));

And then I add this class to the viewport when the field is focused.

Even though the class is added correctly to the viewport, it does not translate the view down.
Also, if I do it in the console directly after the keyboard is shown, then it works fine.

Does anyone know why it does not work when the class it added right after the focus event is fired ?

Answer 1

Operating system takes precedence over whatever you try to do in the first case…Your translate probably applies and after that the operating system (WebView) centers the screen to the textbox…

Since in the second case you translate after the operating system finishes its operations the screen gets translated… Hope this answers helps…