Ion-header-bar : different behaviour on iPhone and iPad

ionic-v1
1

I just noticed a different height in the ion-header-bar as shown in the following images.

iPhone

iPad

image.jpg2048×299

the page is shown as a modal, here is the HTML:

<div class="modal"> <div id="overlayFav-container"></div> <div id="infoFav-container"></div> <ion-header-bar class="bar-stable"> <button class="button ion-chevron-left button-clear button-positive button-small" ng-if="isIOS == true" ng-click="backToSettings('favorites')"> <span translate="back"></span></button> <button class="button ion-chevron-left button-clear bar-balanced button-small" ng-if="isANDROID == true" ng-click="backToSettings('favorites')"></button> <h1 class="title" translate="favorites"></h1> </ion-header-bar> <ion-content> <div class="padding" ng-if="isEmpty == true"> <h3>{{ emptyMessage | translate }}</h3> </div> <div class="list" ng-if="isEmpty == false"> <div class="item item-button-right poiCatImage-toggler" ng-repeat="x in favorites" ng-if="x.isFavorite == 1" ng-click="showFavoriteDetails('{{ x.fav_id }}','{{ x.poi_id }}','{{ x.poi_catid }}')"> <div class="poiCatImage" style="background:url('img/{{ x.icon }}')"></div> {{ x.poi_name }} <button class="button button-clear button-small" style="right:0"><i class="icon ion-chevron-right"></i></button> </div> </div> </ion-content> </div>

and here is the CSS – used to show the modal in full page also on the iPad:

.modal {
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
}
.ios-bot-spacer {
height: 50px;
}
.android-top-spacer {
height: 30px;
}

I’m using Ionic 1.0.0

Can anybody offer a clue about how to get the same height for the “ion-header-bar”?

Thanks!

2

This is because the modal is expected to be in the center on large devices. You need to overwrite the CSS for large screens. Here is a vanilla CSS solution: http://codepen.io/brandyshea/pen/BNzEax?editors=110

If you are using Sass, you could also overwrite variables or remove the code that does this for large screens.

3

thank you so much Brandy!!

1 Like