ios keyboard shrinks app

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.

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.

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).

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.

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.

	jQuery(window).resize(function() {
		cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
	});[/code:170zbw8a]

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

	Just above this line, add the following two functions:
		[code:170zbw8a]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;
		};[/code:170zbw8a]

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

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

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

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

[b]Step 6[/b]
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!

Hmmm.... I am having the same trouble

Is this a bug in C2 ?

Hoping for easy fix

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.

[quote:fy6ide7y] 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!

I had this working .. BUT now with export from r239 stable and using WKWebView

it no longer works

ANY IDEARS

SOLVED it with this

https://www.scirra.com/store/royalty-free-game-templates/soft-keyboard-2817

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

I hope C2 will concern with this issue for the next update, so we can more focus on the game design instead of being confused about component malfunction.

the textbox should be work as like Whatsapp and other common messengers so we can combine chat feature to our gameplay.

seriously, i think with this available standard feature of textbox component, it was hard to make simple chat application on mobile version.

If using Intel XDK, doesn't exporting from Construct 2 overwrite the c2runtime.js and index.html files every time? Is there a way to permanently add/change those values mentioned by correncec above?

Since this thread isn't locked, I'll update anybody looking for answers to this in the same vein as I was:

• @cranberrygame 's Navigation Bar plugin helps a ton with the bottom OS navigation: https://github.com/cranberrygame/cordov ... igationbar
• Cordova's Status Bar plugin helps with the status bar: https://github.com/apache/cordova-plugin-statusbar

I was able to use both of these and call them from the index.html file with the following commands to get it all figured out:

			var autoHideNavigationBar = true;
			window.navigationbar.setUp(autoHideNavigationBar);
			
			console.log(StatusBar);
			StatusBar.hide();[/code:1p37w85w]

Since this thread isn't locked, I'll update anybody looking for answers to this in the same vein as I was:

- cranberrygame 's Navigation Bar plugin helps a ton with the bottom OS navigation: https://github.com/cranberrygame/cordov ... igationbar

- Cordova's Status Bar plugin helps with the status bar: https://github.com/apache/cordova-plugin-statusbar

I was able to use both of these and call them from the index.html file with the following commands to get it all figured out:

			var autoHideNavigationBar = true;
			window.navigationbar.setUp(autoHideNavigationBar);
			
			console.log(StatusBar);
			StatusBar.hide();[/code:2yxv1d2a]

Sorry - I'm realizing that the problem I had was more about the Status Bar and the OS Navigation (for Android), not the iOS screen shrinking when you open the text input. Still though, these things go hand-in-hand.