Mobile iPhone App hides bottom panel when keyboard is opened

Mobile iPhone App hides bottom panel when keyboard is opened

  

Hi everyone.

I have a mobile app running on iPhone and I'm experiencing an anoying layout problem.

On a simple Screen, using SilkUI Layout block, the footer panel is not working properly on iPhone as it works on Android.

I'll show images...


This is my screen, the keyboard is closed.



This is the same screen with keyboard opened - field "Assunto" is focused.

Notice, the expected behaviour would be the bottom panel with the orange button "Enviar" visible just above the keyboard. It is stukying behind the keyboard...



This last image shows the same screen when I scrolled it down.

Now, the header desapears :-(



I did this test on a native mobile app built by Outsystems. I did not test it on Outsystems Now.

This same app works properly on Android devices.

Does anyone have some tip for me  ?

Thanks in advance!

Cheers

Luciano Guimaraes

Forgot to mentioned... I just updated all modules, specially SilkUI to the lastest versions.

I did not have success after that...

Just tested on Outsystems Now and got the same issue..


Hello.

Does someone could help me on this ? It seems a SilkUI problem.

Cheers

Luciano

Hi Luciano,

For the Button, you can try to either put it inside the bottom bar/bottom placeholder or inside a FloatingContent at the bottom, you can see different behaviors when IOS keyboard comes up, it really depends on the use case.

If you want to fix the header (IOS webview is pushed up when the keyboard is open) on input focus, take a look on this plugin. 

Cheers,

Henrique

Really thanks Henrique!

The button is already inside a bottom bar placeholder :-(

I think this plugin can help me... Do I have to control the screen height on keyboard's open / close event ?

This is the root cause of this problem. The screen height is not shrinked when keyboard is opened ? 

And last question, does this plugin help me with height calculations giving me the keyboard height value ?

Cheers.

Luciano Guimaraes 

Hi Luciano,

I'll make some tests on my side to see if I can replicate your problem. I'll lete you know if I find a solution to your issue.

Yes, the plugin is tricky but it has all of that. On IOS the webview is never shrinked, so I made a wrapper to consume that plugin. 

About the Keyboards height, I'm not sure if I implemented them, but i remember that the plugin itself has them.

Wrapping things up, I'll give you an example in a few minutes (I have to clean up my implementation) and tomorrow I'll take a look on your button inside the bottom bar issue.

Cheers,

Henrique

Solution

Hi again,

You can find attached a sample. The code is quite self explanatory, let me know if you have doubts.

If you want to test it (You have to generate a new app so the plugin be included), go to the Example screen and open the input that it's at the bottom of the screen. Then click shrink view and click the input again to see both behaviors.

About the Keyboard height, I didn't implement them at the time, but I don't think you'll need it.

Let me know if it worked.

Cheers,

Henrique

Solution

OK.

I'll test this sample today and let you know the results.

Seeya

Luciano Guimaraes

Hi Henrique.

Your sample did work as expected.

Now, I'm trying to reproduce the same behaviour on my app.

First attempt failed, I'm calling CordovaKeyboardshrinkView but nothing different happens.

I 've already recompile the native app with the plugin included, so I think is another issue.


Anyway, I really thank your help.

Luciano Guimaraes

Hi Luciano,

Sorry for the delayed answer.

Did you manage to get it working?

Cheers,

Henrique

Hi Henrique.

I did some testing using your plugin in my app. It did not work as expected (the webview is not shrinked).

So, I built a fresh new mobile app and everything works fine!

Now, I'm trying to figure out what could be wrong on my app.

Do you have any suggestion ? I already checked the mobile app and it has the plugin in it.


Cheers

Luciano

Hi Luciano,

Just with that is hard to tell.. Are you using any other keyboard plugins?

I can take a look on the .oml if you provide it, but honestly, I don't have any idea of what might be wrong.

Cheers,

Henrique

Hei, you're right, I have another keyboard plugin included on my app "Keyboard Plugin".

I'll try to include this another one om my fresh new app to check whether it has a conflit or not.

This is a good tip :-)

Hey,

Yes, let me know the outcome of it.

Henrique,

I included also the another keyboard plugin and it breaks your plugin funcionality.

Now, I have a big problem... As your plugin is for IOS only (described in forge), how can I have a mobile app working for Android and iOS ? How do I include selectively the correct keyboard plugin ?

Does your plugin work for Android also ?


Cheers

Luciano

Hi Luciano,

Nop, from the tests that I made, it didn't work for Android, so I added the description for IOS only on the forge.

I won't have time today to fix all of it, because I'll need to re-do the entire plugin again and test to see if it's just a naming problem or if the libs are conflicting with each other.

I don't have a solution for you right now.

I'll keep you updated.

Henrique, very thanks for you help.

I really appreciate your interest.

Later, I'll try to fix your plugin (or the another one) to work for both Android and IOS.

I'll send you news about it.


Cheers

Luciano Guimaraes

Hi Luciano,

Did you get it working?

I can't really understand what's causing the issue, because there aren't any errors being thrown.

Which functions/events of the Keyboard Plugin (not the one that i mentioned) are you using?

Cheers,

Henrique

Henrique, just yesterday I could get a Mac to debug mobile app in Safari developers tools.

Today, I'm working on another issues and most likely tomorrow I could get this information.

I let you know asap what's going on.

Cheers

Luciano Guimaraes

As you saide , the footer panel is not working properly on iPhone , you can complete this layout task on your Android phone ,then transfer to iPhone  , 

Easuwet Baky wrote:

As you saide , the footer panel is not working properly on iPhone , you can complete this layout task on your Android phone ,then transfer to iPhone  , 

If you are want to transfer , you have to install USB drive

Easuwet Baky wrote:

Easuwet Baky wrote:

As you saide , the footer panel is not working properly on iPhone , you can complete this layout task on your Android phone ,then transfer to iPhone  , 

If you are want to transfer , you have to install USB drive

It is not easy  to transfer from Android to iPhone as two different OS.