CODEWITHSUNDEEP
angularjsionic-framework
Jordan Lapp
Jordan Lapp

Reputation: 992

Is there a way to hide the header and footer of an ion-view dynamically?

I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.

I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.

So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?

EDIT So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.

Here is a copy of my view:

<ion-view title="My Title">
    <ion-nav-buttons side="right">
        <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()">
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;">
        <div class="button-bar">
            <button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">Save</button>
            <button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">Load</button>
            <button class="button icon-left ion-ios7-play-outline" ng-click="play()">Play</button>
        </div>
    </ion-footer-bar>
</ion-view>

Upvotes: 1

Views: 5453

Answers (1)

Jordan Lapp
Jordan Lapp

Reputation: 992

So, adding the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.

<ion-view hide-nav-bar="true"></ion-view>

However, it doesn't look like you can do this dynamically. i.e.:

<ion-view hide-nav-bar="{{hide}}"></ion-view>

...doesn't work. I'd welcome any thoughts on how to make it dynamic.

*I already answered the question about removing the footer bar in the edit

Upvotes: 2

Related Questions