ramon
February 19, 2016, 12:33pm
1
Hi everyone.
I’m developing an ionic 2 typescript APP, only for iOS devices.
I want to hide StatusBar and I can do that installing cordova-plugin-statusbar and, after platform ready…
if ( StatusBar ) StatusBar.hide( );
It works but my navbar height is incorrect.
How can I remove space at the top of my navbar, after hide StatusBar?
Ionic v1 solves this with:
ionic.Platform.fullScreen( );
but I don’t know how to do that on ionic v2
Thanks in advance.
Hi @ramon , did you solve this issue?
ramon
April 18, 2016, 3:18pm
3
Hi @juanfsemaan , the truth is that I have not solved this problem yet.
If I found a solution I’ll post it.
Sorry
[flood_mode] I like user hate programs that hide the status bar. [/flood_mode]
Try change css.
ramon
May 9, 2016, 10:19am
5
@mhartington , can you help us with this issue?
Thanks.
Hmm, at the moment, I don’t think there’s a built in solution for this.
Though, I’ve opened an issue for this feature so we can get it into V2 core.
ramon
May 18, 2016, 7:36am
7
To remove the statusbar extra 20px definitely on iOS devices I followed this steps:
1- Add statusbarPadding: false to APP config and StatusBar.hide() on platform ready :
@App({
template: '<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>',
config: {
// removes statusbar padding
statusbarPadding: false
}
})
export class MyApp {
rootPage = YourHomePage;
constructor(platform:Platform) {
platform.ready().then(() => {
if (StatusBar) {
// hide StatusBar using cordova-plugin-statusbar
StatusBar.hide();
}
}
});
}
}
2- In xcode, set ‘View controller-based status bar…’ setting to “NO” inside ‘Build Settings’ tab:
3 - Check this two checkboxes in xcode (General tab):
Hide during application launch.
Requires full screen.
I solved this issue using this method @juanfsemaan .
2 Likes
ramon:
statusbarPadding: false
thanks @ramon statusbarPadding: false did it!
1 Like
Since Beta 8, “App” has been replaced by “Component”, so you have to add the “config” as the third parameter to the call to ionicBootstrap like this:
let config = {statusbarPadding: false};
ionicBootstrap(MyApp, null, config);
This worked perfectly for me.
1 Like
try this
.ios ion-nav > .ion-page > ion-content.statusbar-padding:first-child .scroll-content{
padding-top: 0px !important;
}
IonicModule.forRoot(MyApp, {statusbarPadding: false}), …
did the trick for me. Thanks!
4 Likes
It work for me too, thanks.