Empty space when hiding Sub Header or Footer with ng-hide



I have a view with a Sub Header and a Footer and I want to hide the bars under certain circumstances using ng-hide.

Unfortunately the hidden objects leave white gaps behind, even with CSS display: none; How can I hide them without the empty space?

I’ve made an example in CodePen.

Thanks for your help!


Use ng-if instead and evaluate the the expression


Use ng-if instead.

<ion-footer-bar class="bar-stable" ng-if="!hidebars">


Thanks! ng-if did it, but I had to add ng-class="!hidebars ? 'has-subheader' : ''" to <ion-content. Otherwise the content is under the bar when it’s shown.