Hide Header Bar for Certain Controller

ionic-v1
1

Hi there,

How can i hide header bar for some controllers and can have a fullscreen mode just like a splash screen?

Thank you
Anunay

1 Like
2

Would adding the ng-hide or ng-show attribute solve your problem?

3

@anunay, are you using the nav controller? To turn off the header bar on one page, use this:

<nav-page hide-nav-bar="true">

If you are referring to the iOS status bar, you can remove it with the statusbar plugin from apache cordova:

$ cordova plugin add org.apache.cordova.statusbar
$ cordova build ios

Then remove it by calling:

controller('MyCtrl', function($scope, Platform) {
    Platform.ready(function() {
    // Hide the status bar
    StatusBar.hide();
  });
});

Does that help?

5 Likes
4

Thanks Max! That works :slight_smile:

5

Great, I also just made a little tutorial about it: http://ionicframework.com/tutorials/fullscreen-apps/

1 Like
6

I am trying to hide the nav-bar and the header as below but for some reason its not working am I missing something?

<ion-view hide-nav-bar="true">
        <ion-content class="login" has-header="false">

        </ion-content>
</ion-view>

I am getting this in the chrome inspector. I guess its not override the ion-content default class.

<ion-view hide-nav-bar="true" class="pane">
    <ion-content class="login scroll-content  has-header" has-header="false"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0);">

    </div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div></div></ion-content>
5 Likes
7

Can you open a new thread and in it post a CodePen sample? You’ll need to include your Ionic version info as well.

8

it works Thanks :smile:

9

How do you go back to the default status bar on another view from fullscreen?

10

The link to the tutorial is giving a 404, is there another link?

11

The tutorial has moved to http://ionicframework.jp/tutorials/fullscreen-apps/

12

That works, thanks!
But now, how show the menu button?

13

And it’s gone again :slight_smile:

14

If you ever loose a web page just head over to archive.org and paste your old link. They archive most of the Internet - even old version of existing pages and long gone web sites.

Here what this page used to say …

Many apps (not just games!) benefit from a fullscreen experience on the phone, and making your apps fullscreen in Ionic is simple!

First, we need to note this only works on Cordova (recommend v3.3.1) or another native UIWebView wrapper. If we use Cordova, we will need to install one plugin:

$ cordova plugin add org.apache.cordova.statusbar

Then, we will use Ionic’s Platform service to listen for the device ready event and remove the status bar:

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  ionic.Platform.ready(function() {
    // hide the status bar using the StatusBar plugin
    StatusBar.hide();
  });
});

Which might correspond to the following HTML:

<body ng-controller="MyCtrl">
</body>

That’s it! You’ve got your fullscreen app and you are now ready for party time.