search

apache / cordova-plugin-statusbar

Apache Cordova Status Bar Plugin
https://cordova.apache.org/
Apache License 2.0
617 stars 480 forks source link

Cordova Status Bar Plugin (with `StatusBar.overlaysWebView(true)`) hides the input when the keyboard appears #110

Open tharunkumar0 opened 5 years ago

tharunkumar0 commented 5 years ago

I am having an input text box at the bottom of the page which on clicked, the keyboard appears and the text box goes behind the keyboard. This doesn't happen when I remove the cordova status bar plugin. I tried many solution that involves adding the cordova keyboard plugins but didnt work.

janpio commented 5 years ago

What platform? What versions of everything?

tharunkumar0 commented 5 years ago

It's on android 7.1.1

tharunkumar0 commented 5 years ago

I've enclosed the screenshots :) screenshot_20181114-15465 screenshot_20181114-154646

tharunkumar0 commented 5 years ago

Expected behavior screenshot_20181114-160513_chrome

janpio commented 5 years ago

Ahem, I see big screenshots - but not really what is going on and what is wrong. Could you resize and annotate maybe?

tharunkumar0 commented 5 years ago

sure! 121

tharunkumar0 commented 5 years ago

*cordova

janpio commented 5 years ago

And without the statusbar plugin, you get the same result as in the browser?

I think it would be important to have a super simple project that replicated the problem here. Meaning: cordova create, add the platform and this plugin and some minimal html code that replicated this behaviour so one can test it. Please create such a project and put it up on Github and post the link here.

tharunkumar0 commented 5 years ago

Yeah without the status bar plugin, I get the same result as the browser :) Actually I just got the html from the designer and the cordova project had only this plugin enabled :) :)

I'll do what you've asked soon and post a link here!

janpio commented 5 years ago

Best minimize the HTML as well so it is really just the needed elements then please.

tharunkumar0 commented 5 years ago

Sorry For the late action. Here's a simple project demonstrating the issue test.zip

janpio commented 5 years ago

Please create a repository on Github and upload the code there. That can be checked out and tested directly on the command line. THanks.

tharunkumar0 commented 5 years ago

done :) https://github.com/tharunkumar0/test

janpio commented 5 years ago

Ok, have it running (had to delete node_modules and run npm i) on my Android device (Nexus 5, Android 6.0.1):

  1. I see no statusbar at all by default.
  2. When I tap into the "Message" input field, the keyboard pops up and the input fields disappears.
  3. Removing the plugin makes the statusbar appear and the input field is visible over the keyboard when tapping into it.

Everything as expected?

tharunkumar0 commented 5 years ago
  1. That's because of the color of text and background being white. Check again?

Yeah other than that everything as expected! 👍

janpio commented 5 years ago

Oh right, there it is in white font. But it overlays the webview on my app, is this expected? Don't see that in your screenshots of the original app.

screenshot_20181116-132208

tharunkumar0 commented 5 years ago

Yeah that's expected because I've enabled screen overlay ;)

janpio commented 5 years ago

Understood.

The following answers: What is going on here?

I duplicated the app so I have one with plugin (and the bug), and one without. Then I remote debugged both using Chrome:

With plugin, no matter if I am in the input or not I have this representation of the Webview in devtools: image

Without the plugin, I have two different states: image (Note that this is also a few pixels less high - as the toolbar is not applied onto the webview and thus is not part of this screenshot) But as soon as I have the cursor in the input and the keyboard pops up: image

This tells me that with the plugin, the webview is not really resized when the keyboard appears but stays the same size, making the input field disappear behind the keyboard.

Next question: Why?

janpio commented 5 years ago

Ok, this got me thinking: Is it really the presence of the plugin causing the behavior or is it actually the usage of some specific functionality?

I changed the code in onDeviceReady to read:

    //StatusBar.overlaysWebView(true);  
    //StatusBar.styleBlackTranslucent();
    StatusBar.backgroundColorByName("red");

Now I have a red statusbar, and the input field is still visible above the keyboard.

Conclusion: The presence of the plugin is not the problem, the usage of specific features of it might cause this.

My guess would have been StatusBar.overlaysWebView(true);, but your screenshot @tharunkumar0 does show a statusbar in the screenshot with the bug. Can you explain? What exactly are you using of the plugin in your original app?

tharunkumar0 commented 5 years ago

Since, I've used StatusBar.overlaysWebView(true); , The Statusbar just overlays on top of the page. The page has a blank top to blend with the status bar :)

janpio commented 5 years ago

Sorry, I don't understand. Did you move the app top bar down a bit so it looks normal? If so, can you confirm the broken behaviour is gone as soon as the statusbar does not overlay the webview any more?

tharunkumar0 commented 5 years ago

yeah exactly! yeah if I don't use Statusbar overlay even with the plugin added, it doesn't break!

janpio commented 5 years ago

Ok, so using StatusBar.overlaysWebView(true) makes the webview not shrink when the keyboard appears. That sounds like a bug.

tharunkumar0 commented 5 years ago

Yeah!! in iOS, it shrinks a little but still the input is not visible!

janpio commented 5 years ago

Oh, someone/I will have to look into iOS later as well then.

tharunkumar0 commented 5 years ago

Yeah okay :)

tharunkumar0 commented 5 years ago

Any updates? (:

janpio commented 5 years ago

No, the problem is reproduced and documented above, now someone has to analyze what code is causing this and find a way to fix this. I am not an Android programmer, so I can't do that and the other committer to Cordova are volunteers as I am - so I can't tell you when someone is going to look at this.

Feel free to take a look yourself of course! The code is normally pretty readable and with the description above you might be able to just follow what is going on. Finding the code responsible for the resizing of the webview if the option is set / no set would be a good first step.

tharunkumar0 commented 5 years ago

Okay I'll try doing it :) And I'm very new to app development.. I am a web developer

rayudurajesh commented 5 years ago

Facing the same issue. Please post the solution if you find any.

tharunkumar0 commented 5 years ago

Waiting for someone else to work on it. I don't have any knowledge on Java :/

keertisharma7 commented 5 years ago

I have the same exact issue!! The bug is with Statusbar plugin when using the overlay mode only!!! Can someone please try fixing it??

ParulShukla90 commented 5 years ago

+1

@tharunkumar0 were you able to solve it? I am facing the same issue

tharunkumar0 commented 5 years ago

Noo not yet :(

keertisharma7 commented 5 years ago

@tharunkumar0 @ParulShukla90 @rayudurajesh @janpio Did you guys find any solution or on which direction we should move?

keertisharma7 commented 5 years ago

Someone please fix it :(

breautek commented 5 years ago

Here is what I have gathered...

When the statusbar is in overlay mode, this sets the view to be in fullscreen. This is required for a transparent status bar. However, when the view is in fullscreen mode, then the view cannot resize. It will remain full screen even if the keyboard is shown. This results the keyboard overlapping the view.

I've tried some hackish workarounds, but none of them really work or produced undesirable side effects.

By default, the android app is configured with SOFT_INPUT_ADJUST_RESIZE, which says the view should resize when the keyboard is shown.

From the android docs...

If the window's layout parameter flags include FLAG_FULLSCREEN, this value for softInputMode will be ignored; the window will not resize, but will stay fullscreen.

Android Documentation

For the record, I tried using SOFT_INPUT_ADJUST_PAN, but neither options appears to work with full screen.

breautek commented 5 years ago

Ok I think I have a working solution for android. I don't have a mac or an iOS device, so I can't be of any help there.

I'm not an official contributor, and reading the instructions I need to sign an Apache ICLA? But I don't see how I can obtain and sign one. But I'll be more than happy to work with the cordova team with this to get a PR in.

In the meantime, you can try using my fork cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

Tested on an Android 8 device.

tharunkumar0 commented 5 years ago

Heyy @breautek Happy New Year!! :)

Thank you so much for taking your time to fix it! :D

It works near to perfect now in Android!

Still there are problems in iOS

breautek commented 5 years ago

@tharunkumar0 I've checked with my colleague and we could not reproduce the issue on iOS 11 & 12 devices running the cordova ios platform 4.5.5. Someone else on https://issues.apache.org/jira/browse/CB-13300 also claimed that they tested iOS on cordova platform 4.5.5 and could not reproduce the issue. So it might be possible that there is something else unrelated going on there for you on iOS.

Kal-Aster commented 5 years ago

Hi there, I encountered the same issue developing my app. Reading all about this issue I was trying to download the fix to update the plugin, but I can't because the link in this comment is redirecting me to the home page of the repository. Where can I download the fix?

breautek commented 5 years ago

Where can I download the fix?

The PR hasn't been merged in yet. But you can install and use my fork instead of the official cordova version in meantime using the command line in my earlier post.

cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

You can also watch https://github.com/apache/cordova-plugin-statusbar/pull/128 which is the PR for this issue, so you know when you can switch back to the official version.

Kal-Aster commented 5 years ago

Got it! Thank you so much!

shoebsd31 commented 5 years ago

With status bar an in-app browser plugin, the following change in config.xml resolved the issue for me

`

`
Hanzofm commented 3 years ago

This

Ok I think I have a working solution for android. I don't have a mac or an iOS device, so I can't be of any help there.

I'm not an official contributor, and reading the instructions I need to sign an Apache ICLA? But I don't see how I can obtain and sign one. But I'll be more than happy to work with the cordova team with this to get a PR in.

In the meantime, you can try using my fork cordova plugin add https://github.com/breautek/cordova-plugin-statusbar.git#issue-110-statusbar-overlay-keyboard-resize

Tested on an Android 8 device.

Thanks, the problem stills on new version of this official plugin and ionic 5, can someone merge the solution?

@breautek can apply your changes to last stable version?

breautek commented 3 years ago

I'm not sure if my PR will ever be merged tbh, testing against newer webviews (chrome 74+) the webview semes to update when the keyboard is shown now, something that didnt' happen in the past. This means that content is no longer hidden by the keyboard. Not sure exactly when this change happened, but if the chrome webview is doing this automatically, then it renders my PR redundant (because that's what my PR did...)

Additionally the next major of cordova-android (not yet released) will be dropping support for android 4.x and 5.0, so supporting older versions of the webview won't be a concern anymore going forward.

Hanzofm commented 3 years ago

Hi @breautek,

On my current project with:

-cordova-android 8.1.1 -ionic 5. -last version of cordova-plugin-statusbar. -deployed on a android 9.

When I click into a input the keyboard overlaps it. Then, If I restart the app with StatusBar.overlaysWebView(false) this does not happen.

With your fork of the repo this problem not happen.

What would be happening?

breautek commented 3 years ago

When I click into a input the keyboard overlaps it. Then, If I restart the app with StatusBar.overlaysWebView(false) this does not happen.

Ahh.. I think I forgot about the overlay mode and was probably operating with the solid status bar... I'll try to retest tonight and see if I can get my PR moving again.

nelsyeung commented 3 years ago

@breautek Just wanna say thank you! Your fork works perfectly. Tested on iPhone X iOS 13 and Samsung S10+ Android 10. It'd be so good if the PR is in after this long wait.

JayzeeHuang commented 3 years ago

Just simply move everything you need to <ion-footer></ion-footer> will get fixed