I'm using Phonegap to wrap HTML5 mobile app.
I have a problem when I want to remove status bar which is currently covering my header.
I have been adding some preferences inside config.xml file but unsuccessfully.
This is what I have added inside:
<preference name="fullscreen" value="true" />
But I don't see any changes.
Has someone came up with a solution for this?
Setting UIStatusBarHidden to true in your plist hides the status bar in iOS <= 6:
<key>UIStatusBarHidden</key>
<true/>
You can achieve the same thing programatically via: [[UIApplication sharedApplication] setStatusBarHidden:YES]
However, for iOS7 this doesn't seem to work. There you can override prefersStatusBarHidden in your view controller:
- (BOOL)prefersStatusBarHidden {
return YES;
}
Since this method is available since iOS7, overriding it won't have any effect on iOS6.
Related
I'm using Cordova to build Android/IOS app with Javascript
Versions:
cordova-android: 6.2.3
cordova-ios: 4.4.0
Before continue actions, user must be re-ask to confirm. A comfirmation popup will be displayed.
Problem is user can scroll background screen when popup shown in their own device. In development environment (browser), its working perfectly by setting popup wrapper full size of screen. I need disable scrolling in device for this case.
What are the best and simplest ways to fixed it?
Sorry for my bad English!
<preference name="DisallowOverscroll" value="true"/>
put above line in your config.xml.
JS solution could be putting :
document.querySelector('body').classList.add('noscroll');
just before the confirmation popup.
And remove it after:
document.querySelector('body').classList.remove('noscroll');
where noscroll is a class defined in (for example) in styles.css:
.noscroll {
overflow: hidden;
}
I'm having problems resizing the Cordova (4.0.1) webview frame while trying to build a Native Hybrid application. I am relatively new to iOS development and really new to Cordova/PhoneGap.
I have followed all instructions on this page, http://docs.phonegap.com/develop/1-embed-webview/ios/, using the CocoaPods approach with the sample phone gap project. I have searched and tried other methods that are syntactically different, but essentially the same.
I've created a custom view controller class "GolfViewController" that extends the CDVViewController class provided by Cordova. This code for GolfViewController.swift is below:
import UIKit
class GolfViewController: CDVViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
self.view.backgroundColor = UIColor.blueColor()
self.webView.frame = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y + 50,
self.view.bounds.size.width,
self.view.bounds.size.height - 100)
super.viewWillAppear(animated);
}
}
The content in the webview should load with some space at the top and bottom of the screen. Which it actually does, for a split second, then something in the cordova javascript forces the webview to full screen. If I comment out the wkwebview cordova plugin in cordova-plugins.js, the webview renders properly with the space at the top and bottom, but then of course none of the controls work.
Any help would be greatly appreciated as all documented approaches I've tried, have failed.
************* SOLVED *************
There is a cordova plugin called "cordova-plugin-statusbar", that when initialized resizes the webview frame to take full screen. This only happens when you have
<preference name="StatusBarOverlaysWebView" value="true" />
defined in the config.xml for the webview.
It does not simply "overlay the status bar" as you might expect from the documentation. Setting this parameter to true actually completely resizes the webview to go full screen and will override any other custom sizes you may have defined before this event fires.
If you either remove the plugin (not really needed for native hybrid apps anyway) or you disable the "StatusBarOverlaysWebView" preference, then the status bar plugin will not resize your webview and the size you define in "viewWillAppear" will be respected and not overridden. This should be updated within the official phone gap documentation on embedding the web view.
I'm trying to have the index page of my app viewed only portrait. I've surfed the web but I didn't manage to find anything, except for window.orientation which it doesn't work to me. How can i do? I'm using Cordova (HTML, CSS and javascript). Thank you guys!
In your config.xml file add/change this line in your global preferences .
<preference name="Orientation" value="landscape" />
Delete any existing orientation settings if there are any .
fyi. file location should be in following : app/www/config.xml according to:
https://cordova.apache.org/docs/en/4.0.0/config_ref/
If you want to lock orientation in a particular page use the following plugin link
http://github.com/gbenvenuti/cordova-plugin-screen-orientation
So by using this plugin while loading page you can lock the orientation and while leaving or unloading the page you can unlock the orientation.
I want to stop the Keyboard from distorting/resizing my layout in my phonegap application. I have used the following native android code to disable and enable resize in the application using a Cordova Plugin:
this.cordova.getActivity().runOnUiThread(new Runnable() {
public void run() {
context.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
});
However I have no idea how to do the same in iOS(6 & 7). Can anyone provide a snippet that I can use? Or point me in the right direction?
This functionality is available in the Cordova Keyboard plugin. You can then either add a preference to the main Cordova config.xml...
<preference name="KeyboardShrinksView" value="false" />
...or call the corresponding method on the created global Keyboard object:
window.Keyboard.shrinkView(false);
I am running into a strange issue. I am currently producing a mobile web app using HTML5 and CSS3 for iOS 6 only.
However, when an input element receives focus and the soft keyboard is displayed, the window is scrolled so that the input is not obscured by the keyboard (even though it won't be in any instance).
I have read on SO and via Google that one can add the following to prevent this behaviour (when viewing this inside a UIWebView):
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
However, it seems that in iOS 6, even though the window is initially scrolled to 0,0, it is then once again scrolled to centre the focused element. Has anyone else come across this and do they know of a fix for iOS 6?
I hit this issue too. The following works on iOS 6:
<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>
Basically, since Safari decides whether or not to scroll the page based on the textbox's vertical position, you can trick it by momentarily moving the element above the top of the screen then back again after the focus event has completed.
The drawback is that the element vanishes for a fraction of a second. If you want to work around that, you could dynamically insert a clone of the original element at the original location and then remove it in the webkitRequestAnimationFrame callback.
Could it be a timing issue?
Try wrapping it up in a timeout to ensure that it's firing after the native events are firing.
input.onfocus = function () {
setTimeout(function() {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}, 50)
}
Update:
While the accepted solution worked with UIWebView, the newer faster WKWebView has since arrived. And if you are using the latest version of Cordova for iOS you can enable WKWebView for iOS 9 devices, but by default the view will still scroll up. To fix this just add the Keyboard plugin (no CSS hacks needed anymore):
Add Cordova plugins within Terminal:
cordova platform add ios#4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save
Set iOS preference to use WKWebView in Cordova's config.xml
<platform name="ios">
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>
Then insert iOS keyboard preferences in Cordova's config.xml
<preference name="KeyboardShrinksView" value="true" />
<preference name="DisallowOverscroll" value="true" />
More detail on iOS preferences are listed on Cordova docs:
https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html
Set the input's font-size style to be 1em or higher.
<input type=text style="font-size:1.2em">