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

**URL:** <https://forum.ionicframework.com/t/ion-header-bar-different-behaviour-on-iphone-and-ipad/25109>\
**Category:** ionic-v1\
**Created:** [May 19, 2015, 3:56pm UTC](https://forum.ionicframework.com/t/ion-header-bar-different-behaviour-on-iphone-and-ipad/25109 "2015-05-19T15:56:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![camaleo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/camaleo/32/76815_2.png) [@camaleo](https://forum.ionicframework.com/u/camaleo)\
**Post date:** [May 19, 2015, 3:56pm UTC](https://forum.ionicframework.com/t/ion-header-bar-different-behaviour-on-iphone-and-ipad/25109/1 "2015-05-19T15:56:49Z")

</div>

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

**iPhone**  
 ![](https://www.evernote.com/l/AB2o2lYVF8BFOq3BNNcJ9sjJy26XmKFcHewB/image.png)

**iPad**

 ![](https://www.evernote.com/l/AB0rmyj6YDhOX4jv2LVGNMq_RfKCE0oqbfEB/image.jpg)

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!

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [May 19, 2015, 6:06pm UTC](https://forum.ionicframework.com/t/ion-header-bar-different-behaviour-on-iphone-and-ipad/25109/2 "2015-05-19T18:06:05Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![camaleo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/camaleo/32/76815_2.png) [@camaleo](https://forum.ionicframework.com/u/camaleo)\
**Post date:** [May 20, 2015, 7:48am UTC](https://forum.ionicframework.com/t/ion-header-bar-different-behaviour-on-iphone-and-ipad/25109/3 "2015-05-20T07:48:17Z")

</div>

thank you so much Brandy!!