How to remove space at the top of navbar

Ionic Framework ionic-v3
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.

image
image1024×768 30 KB

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.

2

Hi @ramon, did you solve this issue?

3

Hi @juanfsemaan, the truth is that I have not solved this problem yet. :head_bandage:

If I found a solution I’ll post it.

Sorry

4

[flood_mode] I like user hate programs that hide the status bar. [/flood_mode]

Try change css.

5

@mhartington, can you help us with this issue?

Thanks.

6

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.

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:

image
xcode02.png754×454 79.7 KB

3 - Check this two checkboxes in xcode (General tab):

  • Hide during application launch.
  • Requires full screen.

image

I solved this issue using this method @juanfsemaan.

2 Likes
8

thanks @ramon statusbarPadding: false did it!

1 Like
9

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
10

try this

.ios ion-nav > .ion-page > ion-content.statusbar-padding:first-child .scroll-content{
     padding-top: 0px !important;
}
12

IonicModule.forRoot(MyApp, {statusbarPadding: false}), …

did the trick for me. Thanks!

4 Likes
13

It work for me too, thanks.