Android : Is there a way to stop the keyboard from resizing the view?

I try to fix this problem 2 days..
I have 3 Case
Case 1 input box show in upper layout
I don't want view to resize after keyboard show like picture

Case 2 input box in lower layout
I want view to scroll up and focus input box after keyboard show

Case 3 I have upper and lower input box in the same app but in another view
like 2 case,but if I have 2 view,first one like Case1.Another view like Case2.In the same App.
How can I specific layout view to lock layout like Case1 or focus to input box like Case2 ?
Can we set windowsoftinputmode programmatically?

Ps.I try to use keyboard plugin too. (https://github.com/driftyco/ionic-plugin-keyboard)

my ref:
http://stackoverflow.com/questions/10076148/phonegap-is-there-a-way-to-stop-the-keyboard-from-resizing-the-view
http://stackoverflow.com/questions/15000660/phonegap-page-scroll-up-after-keyboard-appearance-in-ios-devices-that-makes-the
http://stackoverflow.com/questions/32811482/keyboard-resizes-webview-in-phonegap-and-destroys-css-layout
https://groups.google.com/forum/#!topic/phonegap/YFmIeUJBnvQ
http://stackoverflow.com/questions/7020721/android-how-to-avoid-layout-being-pushed-when-keyboard-invoked
http://stackoverflow.com/questions/26840898/phonegap-android-add-windowsoftinputmode-using-config-xml

Hello,

Are you using the "Scaled" app's option? In my tests this is the best option for mobiles and the keyboard behaviour is better (in my opinion) because the app is scaled occupied the space leave by the keyboard. The "Fullscreen" option is not recommended for normal apps: probably games and some apps can need it, but in my tests the "Fullscreen" can also interfere with the keyboard behaviour.

So in conclusion:

1º Use the "Scaled" app's option

2º Do not use the "Fullscreen" app's option

Try it and look how the keyboard behaviour. I think it's not a problem if the app layout "scaled" to the free space: in fact the keyboard must be shown to do the work... On the other hand, I can't found in the Cordova's documentation the Android option you mentioned, then maybe you can use it, but manually editing the Android's manifest file.

In 2 case,I didn't use fullscreen app,david.I just fix it by edit androud manifest.
And what is "scale" app option? where can I set it?

Hello,

Of course you need to try with the "Scaled" option if you are not used before:

From the object inspector:

From the app's options dialog:

Hi David, that option I already(and alway) use it and give result as in picture 2 in 2 case.It make layout break.It resize layout to fit space that make layout broken for some device(cannot read because it resize after keyboard show) it not fix my case 2 problem

So,I want layout not resize.I want layout to scroll up(resize will destroy layout because header is fix)

It easier when explain with picture :P

Hello,

This is strange. You are saying the keyboard leave the layout "reduced" after the keyboard is closed? This is what I can't understand, because this is not the behaviour in my tests. In my tests the layout is "scaled" when the keyboard is displayed, and then the layout is "scaled" again, that is, when the keyboard is hide...

Hello,

This is strange. You are saying the keyboard leave the layout "reduced" after the keyboard is closed? This is what I can't understand, because this is not the behaviour in my tests. In my tests the layout is "scaled" when the keyboard is displayed, and then the layout is "scaled" again, that is, when the keyboard is hide...

No no,not "reduce after close".I mean "when the keyboard was show up",the "the layout scale" will resize to "fit view".I just want layout not to fit in view.But can scroll up to focus in input box when keyboard show.

something like this
Scrollable form in Android when the virtual keyboard is open

another question is Can we change "android:windowSoftInputMode" by any javascript?

Hello,

One question (I think important), are you using the Fullscreen option tin?

Hello,

About the option:

I am investigating, but, if you wanted, you can try it by placing the above option (XML element) into the Cordova's configuration Extra XML option:

Take a look here too for possible "android-windowSoftInputMode" values:

http://developer.android.com/intl/es/guide/topics/manifest/activity-element.html#wsoft

Hello,

One question (I think important), are you using the Fullscreen option tin?

No,David.This is my config

And about set android-windowSoftInputMode,I already try it.After run cordova to generate project,in AndroidManifest.xml still not change.Then I manual edit it.

this link like I want it to be
http://unitid.nl/androidpatterns/uap_pattern/soft-keyboard-pan-scan

I searching some topic told me to use scrollView that will fix this situation,But we don't have scrollview in app builder?

Hello,

The point is that the "android-windowSoftInputMode" appear in the Phonegap documentation (maybe old?) but not in the recent versions of Apache Cordova. Maybe, for some reason, this option is not take in consideration. And about the "ScrollView" it's Apache Cordova who does not uses something like that... except maybe by using some thirdty party plugin.

But I want to get back to the main question of this thread tin. After test the "Validator" app sample, which contains lot of Text Input controls, I found the behaviour you mentioned: the layout is "break" after the keyboard is show/hide. However, what I try is to uncheck the "Allow user zoom" option, which is checked by default:

After doing that, I try again with the "Validator" app sample, and certainly I can view the expected behaviour:

1. The view is scaled when the keyboard appear.

2. We can select any input control to enter data.

3. After the keyboard is hide, the app layout is restored (not breaked).

The problem now is I can see this "Allow user zoom" option unchecked in your app options (above)... but maybe you can verify that. As I say, the behaviour I experiment with the "Validator" sample is good and allow us to enter input data without problems or layout breaks.

Hello,

Just to add that I try also with the "GoogleMaps" app sample and the things works like expected: the layout is not broken here in my Android 4.4.2 device. The app is scaled when the keyboard appear and then is scaled again when the keyboard is hidden.

1. App started

2. Keyboard is shown

3. Keyboard is hidden

Hi David.I know what you want to tell me.But this is what I ask you.(I set it as .gif movie to tell you what I mean)
So.This is normal state that App builder do.

And This was I mean and find out how to do with App builder and cordova.

This will be great resource who find out for input box with view not resizing.

Hello,

Yes; in fact, to me the first approach is good enough, but, the second one also looks good.

How do you get it done tin?

The second one I use B4A(Basic4Android),David. lol
It have Event FocusChanged on inputBox.And set scroll position by
ScrollPosition = InputboxTopposition - 10dip
then fire event like that.(I translate code to easy understand the normal code is vb)
It use container panel to scroll.

Is AppBuilder have event to set position scrollview or panel or container?

View resize is good.But if you have small screen device with big keyboard.And you have image in view too.Layout that resize make the view ugly and unreadable.(I will capture image for you why I told this tomorrow.My friend at office have small screen mobile.)
It make me 3 days handle with this problem lol.

Hello,

Yes; we have a Container control in App Builder. I am now try with the Container control. We can put the inputs inside a container and play with the container "overflow". I will inform you about my tests.

Hello,

Yes; we have a Container control in App Builder. I am now try with the Container control. We can put the inputs inside a container and play with the container "overflow". I will inform you about my tests.

Great I wait for inform.And will find another solution too.

Hello,

Update your AB copy tin. I add the new "InputsScroll" app sample that have a behaviour like you wanted. The point is to use a Container control. Inside that control we can place the Inputs (or other controls) we wanted. The Container have their CSS "overflow-x" set to "auto". The view's Show event is used to set the Container height at the start.

The application behaviour is like you wanted and, furthermore, we no need to be worry about the Inputs position: the system automatically place the right Input visible. So, even when I add the new Focus and Blur events to all the Inputs, Select, MultiSelect and Textarea controls, in fact we no need to use that events here.

Please tell me if you found useful this tin.

P.S. I test the "InputsScroll" sample here in my 4'' Android 4.4.2 and my 4.7'' Android 5.1.1.

I test it,David.Perfectly!!.
I try to find the code that you told
"The Container have their CSS "overflow-x" set to "auto"" where the code you place it?
Anyway,It work perfectly.
About Mapnavigate sample that I sent to you.You can use it as your sample in your app. :D
The best thing of App builder is you can find a sample in program.
Not like a B4A,It have no sample come with.You need to find out by yourself.

Hello,

Glad to know tin! And thanks for your kindly words.

"The Container have their CSS "overflow-x" set to "auto"" where the code you place it?

You can use the "Inline CSS" app's option or an external CSS file or the control inspector, which is what I do this time:

Wow it easier now thanks,David. :D

Did the "view" can overflow too?

Hello,

Did the "view" can overflow too?

Maybe... if we set their height in the same way than the Container. I did not try it however.

Hello,

After some tests, the behaviour can't be reproduced with the view itself, even if we set their "height" at start. I am not sure about, because the view is itself a DIV element like a Container control, however, probably it's the way in how the controls are placed in the view. It's not exactly the same if they are placed inside a Container than if they are placed in the view.

Thanks again.Anyway the problem has solve,And we have new sample and overflow properties.That a great for newbies. :D :D

Hello,

In fact the "overflow" already exists in controls like Container, Report and HTML Content, because they are useful sometimes. The new are the Focus and Blur events in all Inputs, Select, MultiSelect and Textarea controls. And the interesting "InputsScroll" sample.

Yes, certainly everyday we can learn something more. :)

Hello there,

Tin, upgrade your AB copy and take a look at the new "InputsScroll2" application sample. I think this shown a more elegant way to solve the software keyboard "problem" instead of the applied in the "InputsScroll" sample, which of course can continue working. Maybe you can consider it for your next projects.

Hope this information can be useful! :)

Hi There David.

Just wanted to let you know that this problem was what I described as the "squeeze" problem.

I think since english is not my first language - I had a problem in explaining.
Glad to see it resolved.

Thanks to you and tin!
Keep up the good work.

Hello to all,

Hi There David.

Just wanted to let you know that this problem was what I described as the "squeeze" problem.

I think since english is not my first language - I had a problem in explaining.
Glad to see it resolved.

Thanks to you and tin!
Keep up the good work.

You're welcome fakie!

Amazing!! Time to say goodbye container...
just 2 code

Amazing!! Time to say goodbye container...
just 2 code

SetStyle "View1" "margin-top" "0px"</p> <p>SetViewSize "" "[App.InnerHeight]px"<br>

That's is! :)

So,Is it support in master view too?
How to coding it to not resize as View1?
Because View1 all control not resize now,but all control in master view still resize.

Hello tin,

I test right now by placing all the "InputsScroll2" sample View1's controls into the Master view. Then I set the "DrawMaster" View1's variable to "true" and try on Android: the result is the same than if the controls are placed directly in "View1".

That's do not surprise me, because in fact the Master view doesn't exists in runtime "as is", in other words, their controls are placed in the current app view if their "DrawMaster" variable is set to "true", but the app never shown the "Master view" "as is".

On the other hand, the above code is specific for the "View1" and doesn't apply to all application's views. That's the point, because probably not all the views in the application requires such behaviour or contains too much input controls like our "Inputs" view.

I am not sure if this can help you in some way tin, because I am not sure if can understand very well what you means. So please go ahead and ask here if you have any further question or need some more help on this.

Hi,David I test again.It was my mistake.I insert Css line for image in master view.After I delete it.it fix now
Thanks again
only 2 code!! It look awesome now.It so nearly perfect as Ionic framework does.

Hello tin,

Hi,David I test again.It was my mistake.I insert Css line for image in master view.After I delete it.it fix now
Thanks again
only 2 code!! It look awesome now.It so nearly perfect as Ionic framework does.

Yes; I also made a test with two views (the "InputsScroll2" sample only has one, maybe I can add another...), one with the inputs and one other with other stuff. Certainly we can apply the "scroll style" just to one view and not others, which is probably what we wanted in most cases.

Hey guys, struggled a bit with the soft keyboard, squeezing the app together, after looking at the examples David left and the other suggestions I ended up with the below that fixed my problems. Created that class at in-line css and added to all my Views, in my case as long as the auto scale is on and this class is loaded every thing is displayed as expected at chrome emulators with and without keyboard open.

Hello Amin,

Thanks for sharing that code. I want to try it when possible. I think the InputsScrolls sample can be avoided, since we can use the InputsScrolls2 sample approach, even if our inputs are not beyond the app's view height. Maybe I need also to prepare an InputsScrolls3 sample, because, from the below two lines that are used in the InputsScroll2 sample:

... certainly the first one can be avoided sometimes, getting also good results with the software keyboard. So, we can choose the approach of the InputsScroll sample, that don't satisfied me due to the use of a container. We can also use the InputsScroll2 approach, with the above two lines, which works well, even if the scrolls don't go beyond the app's view height. And we can also try with the same approach, but, using only the second line of the above code.

And of course another possible way can be to try your CSS code. :-)

Hi David,

I agree that there is no point for "InputsScrolls" since the view itself acts like a container and adding a container within the other would not help much here (I have actually used two containers within each other at webdesign for scrolling, so could be useful for some cases). "InputsScrolls2" on the other hand was behaving funny for me, it was leaving long blank margins at the top and below sometimes and some of the text was remaining under the keyboard, I did not mess around it for long though!

The css I shared is technically what you have in the two examples combined in a slightly different approach, instead of reading the size of view like in "InputsScrolls2", I just gave it a minimum height size and like "InputsScrolls" sat the overflow-y to auto, so any time height goes under the given pixel scroll appears and for above that it acts normal.

Long story tale for this problem...

Sometime InputsScrolls2 method have a bug when keyboard was showing and user click to go to new view.When the new view was show,layout will resize.

Hello to all!

Yes; Tin, another issue that I can see is if the input is in the bottom of the view, but, we can solve it by place some container or other control like a button below the input that is reach to the bottom of the view. On the other hand, I want to prepare an InputsScroll3 sample... and maybe an InputsStroll4 sample based in the Amin code, just when I can try it here. :-)

Still waiting for InputsScroll3 and InputsScroll4 sample...

Thanks,David.

Hello to all,

Then I can't be a bit sarcastic with my poor english... if I am not wrong my imagined sample 3 wanted to shown that, at least some times, we can reduce the sample 2 to just one line, that is, from this:

To this:

On the other hand, the sample 4 wanted to use the Amin proposed code. So, as you can see, Tin, we already know what the sample 3 and sample 4 can be, without included it in App Builder. :)