Phonegap build Status bar overlaps webview in Fullscreen Mode - android

I built an app with PhoneGap Build for Android. It works fine until you open any text input - after that status bar overlaps webview and stays there.
http://i.stack.imgur.com/CxZX2.png
http://i.stack.imgur.com/m6noH.png
This is the same question like this one
Phonegap: Android 6 status bar overlaps webview
but i don't want to disable the Full-Screenmode.
I think it is not possible to force to disable the Fullscreen mode (all the time). Right?
If so:
My idea/workaround is to hide the statusBar after focus out.
If this possible with phonegab build?
Thanks in advance!


My workaround:
add this to your config.xml
<plugin name="cordova-plugin-statusbar" source="npm"/>
and add this to your in your js file
$(document).click(function()
{
StatusBar.hide();
});

Related

DateTime-local how to prevent keyboard from appearing in android webview

I currently have a cordova android application that uses the following html5 tag:
<input type="datetime-local"/>
On android this triggers the keyboard to show up. However, I want to disable the keyboard because it doesn't make sense because the widget itself is sufficient. You don't need the keyboard showing.
However, I can't figure out how to disable the keyboard from popping up.
Thanks,
D

Add "readonly" attribute to your input tag. It will prevent the triggering of keyboard.

show top and bottom menu after click textbox in cordova

I use cordova and set app to fullscreen.
when user click the textbox to type, andoid show the keyboard and show top and bottom menu. after unfocused from textbox, top and bottom menu is visible and have overlap with application.
How can force android to don't show these menus and show only keyboard?
OR how can hide these menus?

You can try this, may be help you
Add statusbar plugin
cordova plugin add cordova-plugin-statusbar
Then on keyboard hide event set statusbar hide like
window.addEventListener('native.hidekeyboard', function(){
StatusBar.hide();
});

Scroll to input field in the React Native WebView Android

We are using React Native for mobile app development. We have WebView component where are some predefined input fields placed in the text of WebView html.
The problem is that when we select input field for edit - View is not scrolled to show actual input when keyboard appears.
We cant use
<preference name="fullscreen" value="true" />
since we are using out custom navigation bar to control the application state.
The best description of this problem was found here:
input field hidden when soft keyboard appears in phonegap
But none of the variants worked for us.

Disable/Hide text selection context-menu on Android WebView generated by Cordova

I am trying to disable, remove or hide the context menu that appears when highlighting text natively in android. http://i.stack.imgur.com/caUOw.png (My reputation is too low to include it in this post :P) The top right button on the green header is intended to be the selectable context menu in the app. The native context menu appearing lags the app and confuses the user's experience based on testing.
I've tried:
Overriding ActionMode.Callback in the cordova generated MainActivity. After accessing the menu (mode.getMenu()) I could clear it(menu.clear()) http://i.stack.imgur.com/t9chW.png. But! menu.close() does not close the context menu.
Creating an empty menu view and calling the action mode's menu inflater on the empty menu.
-webkit-touch-callout: none; in the javascript.
Please help!

Adding the following code to your CSS stylesheet should prevent this behavior in a WebView:
body {
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
Unsure if you're looking to disable in a WebView or in native UI components.

Even thoush this is an old question, i wanted to share my solution because it took me quite a while to figure out.
Catch the 'contextmenu' event and preventDefault().
<input style="text" oncontextmenu="e=>e.preventDefault()"/>
or
myHtmlElement.addEventListener('contextmenu', e => e.preventDefault())

Footer navbar moves up when clicking on a textbox in an Android environment

I'm developing an app using jqm and phonegap. In an Android environment, the jqm footer navbar moves up when I click on a textfield. In the iOS environment, this behavior doesn't show up.I am using JQM 1.1.0 and tested with android 2.3. How to solve this behaviour ?

I had the same issue as you. The fix was to add this line to respective navbars:
data-hide-during-focus"" data-tap-toggle="false"
This prevents the unwanted behaviour in a navbar, header, or footer when clicking or tapping on empty space in the HTML

Categories

Resources