iOS: Can't change height of ion-header-bar

ionic-v1
#1

Problem: On iOS, my custom CSS to change the height of the <ion-header-bar> directive to fit a logo doesn’t work. The header seems to return to its default height of 44px and the logo overlaps the content below it.

Left: Screenshot of actual iDevice, logo in <ion-header-bar> overlaps <ion-content>.
Right: Screenshot of how it looks in a web browser, in the iOS emulator, and on Android. The logo stays within the <ion-header-bar> element.

Here is the CSS I’m using on the <ion-header-bar> which has the classes of .bar and .bar-header:

.has-header {
  top: 75px;
}
.bar {
  height: 75px;
}
.bar-header .title {
  margin-top: 10px;
  height: 74px;
  line-height: 75px;
}
.back-arrow {
  font-size: 35px;
}

And here is the relevant HTML, all contained in an <ion-view>:

<ion-header-bar>
  <div class="buttons">
    <a href="#/login">
      <button class="button button-clear">
        <i class="ion-arrow-left-c back-arrow"></i>
        <!-- Removed "Sign out" text shown in screenshots -->
      </button>
    </a>
  </div>
  <h1 class="title">
    <img class="title-image" src="img/logo.svg" height="60" alt="SchedU Logo">
  </h1>
</ion-header-bar>
<ion-content has-header="true">
  <ion-list class="class-list">
    <!-- Content -->
  </ion-list>
</ion-content>

As noted in the HTML, the “← Sign Out” link has changed to just being a large “←” icon.

Here is a Plunker, although it may not help much because the header renders fine in it.

[Layout] Bigger header for side menu
#2

I fixed my own problem! Woo!

Here’s the deal: Ionic applies platform-specific CSS classes on the <ion-header-bar> directive on iOS7. I used the Safari Web Inspector to look at the CSS being applied to the app running on an iDevice, and found the below classes. I modified their values and sure enough my problem was fixed!

/* iOS Specific Overrides to fix logo overlap */
.platform-ios7.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: 25px;
}
.platform-ios7.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 90px;
}
.platform-ios7.platform-cordova:not(.fullscreen) .has-header {
  top: 90px;
}

This should be documented somewhere, that was one of the most frustrating bugs I’ve ever had to figure out with Ionic. I wish I had thought of the Safari Web Inspector sooner!

#3

To avoid these issues in the future, I would recommend using the Sass feature, and simply change the specific variable to fit your need, in this case, $bar-height.

1 Like
#4

Great idea. I haven’t yet taken the time to learn Sass, but I will if it will help with Ionic development. Any link suggestions to get me started?

How to change height of the header?
#5

These resources should get you started:

1 Like
#6

Hello, i’m trying to override $bar-height only for some specific views with large headers.
Everything that i tried so far doesn’t work.
Any insights on how to override $bar-height for specific view classes or id(s) ?

#7

not that hard, something like this should do:

.bar.large-header {
$bar-height: 70px;
@extend .bar;
}

#8

I could solve my problems using css like this: :sunglasses:

.my-header{
	height: 78px !important;
	background-color: #40414d;	
}

.bar.bar-header.my-header{
  height: 78px !important;
  background-color: #40414d;
}

.title{
	height: 78px !important;
}