ios keyboard shrinks app

Get help using Construct 2

Post » Fri Jun 03, 2016 1:26 pm

When I use a textbox on an iPad or iPhone, once the user touches the box for input, the soft keyboard appears, and pushes up the layout out of view. Once something is typed, the layout appears (shrunk to fit) above the keyboard (on the iPhone the text inputted is so small that it's hardly readable since everything is shrunk).

How can one make it so the layout stays put when the keyboard appears?

I searched the internet, and it seems that this is a problem that hasn't been fixed. It has something to do with phonegap's "keyboardShrinksView" line in the config file.
From phonegap:
"KeyboardShrinksView (boolean, defaults to false) - set to true to shrink the WebView when the keyboard comes up. The WebView shrinks instead of the viewport shrinking and the page scrollable. This applies to apps that position their elements relative to the bottom of the WebView. This is the default behaviour on Android, and makes a lot of sense when building apps as opposed to webpages."

Anyway I set this in the config.xml file, nothing changes.
B
11
S
3
Posts: 62
Reputation: 813

Post » Mon Jun 06, 2016 4:17 am

Why don't you modify it using:

System > In On Platform > IOS (Might need to be a sub event of "On touch" to your textbox. Depends on your code or make 2 separate conditions or using "Else")

Then Modify the size and position of the textbox until the required text is entered. Then find another condition to restore it to it original size and position.
Image
B
75
S
23
G
3
Posts: 673
Reputation: 9,293

Post » Wed Jun 08, 2016 12:46 pm

I tried it, and it didn't work. I increased the size and tried to move it. This resulted is a larger view, with things being cut out (so apple shrunk and then whatever didn't fit got cut).

The strange thing is that the layout stays put in the Safari web view, but when you save it to homepage it does this (it also does this when exporting with Cordova and using Intel XDK). So, when treated like an app, apple shrinks the view when the keyboard comes up. From what I gather from the web, Apple didn't always do this and the developer had to make sure any text box was in a position that it wouldn't be covered by the keyboard. But some IOS update changed that. Also, it seems that Android also does this shrinking thing (frustrating many).
B
11
S
3
Posts: 62
Reputation: 813

Post » Tue Jun 14, 2016 6:47 pm

Same story here - I'm using Cordova/Intel XDK. I have an older version of my app built pre-227 and I am not seeing this resizing issue. It was only after updating to build 227 did I notice this happening.
B
15
S
2
Posts: 10
Reputation: 822

Post » Tue Jun 14, 2016 8:29 pm

Okay, I have found a solution...I'm not 100% guaranteeing it won't have negative effects, but this has so far worked for me.

Note that I am exporting from C2 for Cordova and then using Intel XDK to package into an .ipa.

Step 1
You need to export for Cordova with your .js UNminified

Step 2
Within index.html, add the following within the <script> tag that begins on line 72.
Code: Select all
   jQuery(window).resize(function() {
      cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
   });


Step 3
Next, we will be modifying 3 spots within c2runtime.js. First, head to line 3381. You should see a line like this:
Code: Select all
   var raf = window["requestAnimationFrame"] ||
     window["mozRequestAnimationFrame"]    ||
     window["webkitRequestAnimationFrame"] ||
     window["msRequestAnimationFrame"]     ||
     window["oRequestAnimationFrame"];


Just above this line, add the following two functions:
Code: Select all
function window_innerWidth()
      {
         if (typeof jQuery !== "undefined")
            return jQuery(window).width();
         else
            return window.innerWidth;
      };
      function window_innerHeight()
      {
         if (typeof jQuery !== "undefined")
            return jQuery(window).height();
         else
            return window.innerHeight;
      };


Step 4
Next, head to around line 3731, where you'll find something like:
Code: Select all
      if (this.fullscreen_mode > 0)
         this["setSize"](window.innerWidth, window.innerHeight, true);
      try {...


Replace window.innerWidth with window_innerWidth()
Replace window.innerHeight with window_innerHeight()

Step 5
Similar to step 4, head to around line 4987 where you will find:
Code: Select all
         if (this.lastWindowWidth !== curwidth || this.lastWindowHeight !== curheight)
         {
            this["setSize"](curwidth, curheight);
         }


Replace curwidth with window_innerWidth()
Replace curheight with window_innerHeight()

Step 6
That's it - now compile as you normally would within Intel XDK.

Again, use with caution - since I'm not Ashley, I don't know the reasoning behind stopping the use of window_innerWidth() and window_innerHeight(). All I can say is that so far, the issue has been resolved and I've not noticed any ill effects. I hope this helps!
B
15
S
2
Posts: 10
Reputation: 822

Post » Wed Jun 15, 2016 6:56 am

Hmmm.... I am having the same trouble


Image

Is this a bug in C2 ?

Hoping for easy fix :-)
B
34
S
18
G
11
Posts: 355
Reputation: 8,807

Post » Fri Jun 17, 2016 1:01 pm

Thanks - Correncec! IT totally worked! You're a genius!!!

One thing I wasn't sure about:

In Step 5, there are two places of: "curwidth" and "curheight", do both get replaced? The answer is: Yes they do.

if (this.lastWindowWidth !== curwidth || this.lastWindowHeight !== curheight)
{
this["setSize"](curwidth, curheight);
}
Replace curwidth with window_innerWidth()
Replace curheight with window_innerHeight()


Also - I just installed the latest XDK and the Intel XDK app preview on my devices. What a time saver in testing! Now, all you have to do is export using Cordova, select the "test" tab in XDK, then push your files, and (in the app on your device) hit the camera, aim at the QR code and, BAM!!!, there it is on the device!
B
11
S
3
Posts: 62
Reputation: 813

Post » Wed Dec 07, 2016 8:51 pm

I had this working .. BUT now with export from r239 stable and using WKWebView
it no longer works

ANY IDEARS :-)
B
34
S
18
G
11
Posts: 355
Reputation: 8,807

Post » Mon Dec 12, 2016 8:29 am

B
34
S
18
G
11
Posts: 355
Reputation: 8,807

Post » Thu Dec 15, 2016 4:08 pm

Thanks, flemmig! When I saw your post about the solution no longer working, I wasn't very happy. I'll give your solution a try :)
B
11
S
3
Posts: 62
Reputation: 813

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 25 guests