I'm building an application for iPad with Phonegap and Framework7 and I can't seem to get the status bar to be hidden on the iPad no matter what I do.
I've tried to google out a few tutorials, including the following questions:
How to remove iOS status bar with Phonegap Build?
How to completely hide the status bar in iOS using Cordova?
Cordova/Phonegap ignores fullscreen preference in config.xml on iOS
I've tried the solutions provided in all the answers of the questions above and my status bar is still there.
I've opened the project with xCode and I can see that the settings are configured fine:
For the iPhone settings in deployment info:
Status Bar Style: Default
Hide status bar (checked)
Requires full screen (checked)
For the iPad settings in deployment info:
Hide during application launch (checked)
Requires full screen (checked)
In the Info > Custom iOS Target Properties, I have set the following:
View controller-based status bar appearance: NO
I've also tried to use the JavaScript way when the deviceready event has been fired:
StatusBar.hide();
Update
When I run:
StatusBar.isVisible
The property returns false, however I still see the white bar at the top.
After some long hours of debugging, I finally figured out what the issue was.
In fact, the status bar was hidden, and the white bar we would see is the overlay provided by Framework7, which explains the following:
StatusBar.isVisible // false
Apparently Framework7 is hiding the status bar, but leaving a blank white bar on top of the application, which is a padding.
So to remove the bar, I had to remove the class with-statusbar-overlay from the html tag. And to do so, I added the following to my Javascript file:
document.documentElement.classList.remove('with-statusbar-overlay');
Note that the Javascript fix must be executed before the deviceready event. Otherwise, you will see the home view with the bar, then the bar will disappear. If you put it before the event, the user will never see the bar.
document.documentElement.classList.remove('with-statusbar-overlay');
Dom7(document).on('deviceready', function(){
// Your code
});
Related
xcode - webview content is showing in status bar
In this post, it hints that to ensure the status bar is not sitting over the webview, ie in capacitorjs's case the app, you should add constraints to the storyboard.
However, in my xcode (latest), the storyboard for capacitor "Bridge view controller" does not allow me to apply constraints.. all the options are greyed out:
However, I cannot figure out how to get the ios status bar to not sit over the top of the app, and all the old Cordova and ionic methods do not appear to be working.
Whatever I do the status bar hand over the webview..
Any ideas or ios/capacitor js pro's out there who could help?
Capacitor uses a single ViewController where the only view is a WKWebView that is full screen, so you can't add any constraints to it.
What you should do to avoid the notch is to add this viewport meta tag <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> to your index.html and respect the Safe Areas with the help of env() CSS function and pre-defined environment variables safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom as described by Apple on this article
If your app is not going to be scrollable and you don't want to deal with the safe areas yourself, you can alternatively set the viewport meta tag to <meta name='viewport' content='initial-scale=1, viewport-fit=contain'>
and add this to the capacitor.config.json
"ios": {
"contentInset": "always"
}
I'm not familiar with Capacitor, but as an iOS developer a View Controller in not a visual element so it is not capable of having constraints.
You'll need to figure out a way to access the UIView in Capacitor and then apply constraints the the view.
I have read the other posts about the UINavigationBar's Prompt not following the color values of the actual Title. Most of the posts are from the iOS 11 era, and the solutions no longer work on iOS 13.
These are examples of previous posts that no longer have working solutions:
Can't change UINavigationBar prompt color
Change font of prompt in UINavigationController
iPhone: Possible to change the color of just the prompt of the UINavigationBar?
Has anyone else encountered this?
I would suggest the following:
Check that the device is not running in Dark Mode.
Verify that the background-color was not modified anywhere in the code.
Make sure that the style is set to default like in the screenshot below:
I am using the Cordova StatusBar plugin: https://github.com/apache/cordova-plugin-statusbar It works well except when I initially hide the status on iOS.
What I try to do:
on iOS
Hide status bar when splashscreen is visible
Show status bar when splashscreen disappears
For that, I modify my plist as specified in the plugin's README. It works fine, the status bar is hidden when splashscreen is launched.
However, when I use StatusBar.show(), it doesn't work. The status bar stays hidden. (I use StatusBar.show() on devicereadyevent.)
I've finally resolved my problem. I post here what I've found if anyone wants to achieve the same thing I did.
First note that I use PhoneGap Build, so this solution applies to that service.
To hide status bar during the time the splashscreen is visible, you need to modify the app's plist file (as stated here: https://github.com/apache/cordova-plugin-statusbar#hiding-at-startup).
To achieve on that on PhoneGap Build, you have to add the follwing lines to your config.xml file:
<gap:config-file platform="ios" parent="UIStatusBarHidden"><true/></gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance"><false/></gap:config-file>
Then you'll need to voluntarily show the status bar. So when hiding the splashscreen, use StatusBar.show();.
setTimeout(function() {
navigator.splashscreen.hide();
StatusBar.show(); // Status bar is initially hidden, we need to show it when splashscreen disappears
}, 2000);
Enabling personal hot spot pushing down the view and related subviews pushing down. How to disable the personal hotspot notification programmatically? (how can i restrict iPhone status bar to original size even when HOT SPOT is on?)
I found rather late that the Personal Hotspot doesn't just add 20points to the status bar, it messes up views that rely on drop points in an animator with gravity. I added code that checks the status bar height before laying out the views. If it's not 20, then it's probably the hotspot, so I just hide the status bar. Not an ideal solution, but works so far.
- (BOOL)prefersStatusBarHidden {
if ([UIApplication sharedApplication].statusBarFrame.size.height == 20) {
NSLog(#"Status bar is 20 so returning NO for hidden");
return NO;
}
NSLog(#"Status bar is not 20 so returning YES for hidden");
return YES;
}
If you disable statusbar then automatically disable Hotspot bar.
The Apple documentation is not very descriptive of the status bar, esp. the 2nd row that appears when you are using hotspot, map, calls, etc.
Even if more than one is running, there is only one additional row.
I don't know how 3rd party apps appear, but the questioner asked specifically about Personal Hotspot which is a system service.
I doubt the display can be controlled by anybody, except when the user turns the service off.
You probably have to do it the "hard" way". You should hide the main status bar, then draw your own custom status bar.
BTW, Apple says not to do this:
Use the system-provided status bar. People expect the status bar to be consistent systemwide. Don’t replace it with a custom status bar.
https://developer.apple.com/ios/human-interface-guidelines/bars/status-bars/
It's an alternative way but it works.
First include a new key in your project's Info.plist:
Status bar is initially hidden: YES
And then, in your AppDelegate, at didFinishLaunchingWithOptions you can set:
[application setStatusBarHidden:NO];
This will hide the hotspot bar during launch screen and then show it again when the app launches.
I have issue with status bar, because it overlay my close button on ads.
I show ads using this method
[splashInterstitial_ loadAndDisplayRequest:[self createRequest]
usingWindow:self.window
initialImage:image];
so then I see next:
as you can see close button conflicts with status bar.
How to remove admob status bar on iOS 7
There is no way to preserve the iOS 6 style status bar layout. The status bar will always overlap your application on iOS 7
Refer this link
http://www.appcoda.com/customize-navigation-status-bar-ios-7/
http://blog.jaredsinclair.com/post/61507315630/wrestling-with-status-bars-and-navigation-bars-on-ios-7
goto your application-Info.plist and add View controller-based status bar appearance set NO