4

This is the issue I'm having when the textfield is focused in my Sencha Touch App

enter image description here

The textfield seems to be centered vertically and horizontally for some reason.

This is how it's supposed to look

enter image description here

Does anyone already have the same issue and solved it ?

Update

It does not happen all the time but does happen on any textfield that is not originally horizontally centered.

Does happen on Android sometimes as well (Chrome 26)

Titouan de Bailleul
  • 12,920
  • 11
  • 66
  • 121
  • And how exactly is it supposed to look? We just see a TextBox that looks properly aligned... – Jesse Apr 23 '13 at 11:40
  • I just added a screenshot of how it's supposed to look. The same but without the horizontal centering (so without the white margin on the right) – Titouan de Bailleul Apr 23 '13 at 12:32
  • Do you have the page uploaded somewhere we can test? Strip the rest of app, leave just the problem page :) – RaphaelDDL Apr 23 '13 at 13:39
  • @TDeBailleul By the way, try [THIS](http://stackoverflow.com/a/6918582/684932) approach. This might solve your problem. If it solve, let me know and I'll post as answer. – RaphaelDDL Apr 23 '13 at 13:46
  • Your page is probably already too wide, and when the page is focused, the browser is just centering the focus on the device. The fb-root div is probably causing it as Facebook will dynamically generate content and put it in there, causing the page to be too wide. – rdougan Apr 24 '13 at 11:43
  • Exactly. I fixed it easily by hiding the fb-root div after the app request is sent. Thanks everyone. – Titouan de Bailleul Apr 24 '13 at 12:47

3 Answers3

1

I believe that what you are seeing is (at least from the screenshots) iOS's Safari auto-zoom feature on input boxes. This "phenomenon" automatically centers/focuses an input box when it gains input focus.

This <meta /> tag helps prevent that:

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

What this <meta /> tag above accomplishes is:

  • Rendering the page at the device's screen width;
  • Setting the zoom level at 1:1;
  • And fixing the maximum scale to be 1 (essentially unscalable).

If your page is definite optimized for mobile devices, then the above solution should work just fine.

Alternatively, in case you'd like to have control over which <input /> control this happens to, use:

<meta name="viewport" content="width=device-width" />

and then, set each <input />'s font-size style to at least 16 pixels.

<input type="text" style="font-size: 16px;" />

This more compact <meta /> tag simply says that the page should be initially presented at a 1:1 scale.

Here's a test page (shortened: http://bit.ly/15GbxJa) that will demonstrate what you (hopefully) want to fix. This test page is using the second (alternate) method for more fine-grained control; you can take a look at the source code for reference.

Initial page display:

Initial page display

With and without auto-zoom respectively:

Auto-zoom enabled Auto-zoom disabled

Jesse
  • 8,605
  • 7
  • 47
  • 57
  • Sencha Touch apps already have the meta So there is already no zoom. – Titouan de Bailleul Apr 24 '13 at 09:49
  • Well, I guess that's that...but, can you place online a test page that demonstrates the same issue? – Jesse Apr 24 '13 at 10:50
  • I tried but the bug only appears when I use the entire and I'm not allowed to publish that. But I found something though. I have a
    in my page and if I remove it, then the bug is gone...     – Titouan de Bailleul Apr 24 '13 at 11:09
  • Well, I guess this is where I draw the line =\. Unfortunately, I have never used Sencha Touch, and I thought that it may have been a page scaling issue; I'm sorry. If there's anything else I can do, please feel free to reply. – Jesse Apr 24 '13 at 11:37
  • Giving you the bounty for the help and also because it might help other users. Thanks – Titouan de Bailleul Apr 29 '13 at 22:52
  • Thanks @TDeBailleul! Hopefully the answer does help someone in the future. =) – Jesse Apr 29 '13 at 22:59
1

It was actually the Facebook <div> that you need to have in your index.html, which during the app requests was causing this issue. Like @rdougan said, it was larger than the screen and therefore the field was horizontally and vertically centered.

To solve this issue, I just hide the Facebook <div> after the app request has been sent and show it whenever I need it.

Jesse
  • 8,605
  • 7
  • 47
  • 57
Titouan de Bailleul
  • 12,920
  • 11
  • 66
  • 121
0

Try setting min-width on the parent element

user6851300
  • 1